@porsche-design-system/components-react 3.8.0-rc.0 → 3.9.0-rc.0

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

@@ -1,14 +1,14 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
-import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 import { DSRTagDismissible } from '../dsr-components/tag-dismissible.mjs';
 
-const PTagDismissible = forwardRef(({ aria, color = 'background-surface', label, theme = 'light', className, children, ...rest }, ref) => {
+const PTagDismissible = forwardRef(({ aria, color = 'background-surface', label, theme, className, children, ...rest }, ref) => {
     const elementRef = useRef();
     const WebComponentTag = usePrefix('p-tag-dismissible');
-    const propsToSync = [aria, color, label, theme];
+    const propsToSync = [aria, color, label, theme || useTheme()];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
         ['aria', 'color', 'label', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
@@ -22,7 +22,7 @@ const PTagDismissible = forwardRef(({ aria, color = 'background-surface', label,
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsx(DSRTagDismissible, { aria, color, label, theme, children })),
+                children: (jsx(DSRTagDismissible, { aria, color, label, theme: theme || useTheme(), children })),
             }
             : {
                 children,

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

@@ -1,14 +1,14 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
-import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 import { DSRTag } from '../dsr-components/tag.mjs';
 
-const PTag = forwardRef(({ color = 'background-surface', icon, iconSource, theme = 'light', className, children, ...rest }, ref) => {
+const PTag = forwardRef(({ color = 'background-surface', icon, iconSource, theme, className, children, ...rest }, ref) => {
     const elementRef = useRef();
     const WebComponentTag = usePrefix('p-tag');
-    const propsToSync = [color, icon, iconSource, theme];
+    const propsToSync = [color, icon, iconSource, theme || useTheme()];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
         ['color', 'icon', 'iconSource', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
@@ -22,7 +22,7 @@ const PTag = forwardRef(({ color = 'background-surface', icon, iconSource, theme
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsx(DSRTag, { color, icon, iconSource, theme, children })),
+                children: (jsx(DSRTag, { color, icon, iconSource, theme: theme || useTheme(), children })),
             }
             : {
                 children,

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

@@ -1,15 +1,15 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
-import { useEventCallback, usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 import { DSRTextFieldWrapper } from '../dsr-components/text-field-wrapper.mjs';
 
-const PTextFieldWrapper = forwardRef(({ actionIcon, actionLoading = false, description = '', hideLabel = false, label = '', message = '', onAction, showCharacterCount, showCounter = true, showPasswordToggle = true, state = 'none', theme = 'light', unit = '', unitPosition = 'prefix', className, children, ...rest }, ref) => {
+const PTextFieldWrapper = forwardRef(({ actionIcon, actionLoading = false, description = '', hideLabel = false, label = '', message = '', onAction, showCharacterCount, showCounter = true, showPasswordToggle = true, state = 'none', theme, unit = '', unitPosition = 'prefix', className, children, ...rest }, ref) => {
     const elementRef = useRef();
     useEventCallback(elementRef, 'action', onAction);
     const WebComponentTag = usePrefix('p-text-field-wrapper');
-    const propsToSync = [actionIcon, actionLoading, description, hideLabel, label, message, showCharacterCount, showCounter, showPasswordToggle, state, theme, unit, unitPosition];
+    const propsToSync = [actionIcon, actionLoading, description, hideLabel, label, message, showCharacterCount, showCounter, showPasswordToggle, state, theme || useTheme(), unit, unitPosition];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
         ['actionIcon', 'actionLoading', 'description', 'hideLabel', 'label', 'message', 'showCharacterCount', 'showCounter', 'showPasswordToggle', 'state', 'theme', 'unit', 'unitPosition'].forEach((propName, i) => (current[propName] = propsToSync[i]));
@@ -23,7 +23,7 @@ const PTextFieldWrapper = forwardRef(({ actionIcon, actionLoading = false, descr
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsx(DSRTextFieldWrapper, { actionIcon, actionLoading, description, hideLabel, label, message, showCharacterCount, showCounter, showPasswordToggle, state, theme, unit, unitPosition, children })),
+                children: (jsx(DSRTextFieldWrapper, { actionIcon, actionLoading, description, hideLabel, label, message, showCharacterCount, showCounter, showPasswordToggle, state, theme: theme || useTheme(), unit, unitPosition, children })),
             }
             : {
                 children,

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

@@ -1,14 +1,14 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
-import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 import { DSRTextList } from '../dsr-components/text-list.mjs';
 
-const PTextList = forwardRef(({ listType, orderType, theme = 'light', type = 'unordered', className, children, ...rest }, ref) => {
+const PTextList = forwardRef(({ listType, orderType, theme, type = 'unordered', className, children, ...rest }, ref) => {
     const elementRef = useRef();
     const WebComponentTag = usePrefix('p-text-list');
-    const propsToSync = [listType, orderType, theme, type];
+    const propsToSync = [listType, orderType, theme || useTheme(), type];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
         ['listType', 'orderType', 'theme', 'type'].forEach((propName, i) => (current[propName] = propsToSync[i]));
@@ -22,7 +22,7 @@ const PTextList = forwardRef(({ listType, orderType, theme = 'light', type = 'un
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsx(DSRTextList, { listType, orderType, theme, type, children })),
+                children: (jsx(DSRTextList, { listType, orderType, theme: theme || useTheme(), type, children })),
             }
             : {
                 children,

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

@@ -1,14 +1,14 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
-import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 import { DSRText } from '../dsr-components/text.mjs';
 
-const PText = forwardRef(({ align = 'start', color = 'primary', ellipsis = false, size = 'small', tag = 'p', theme = 'light', weight = 'regular', className, children, ...rest }, ref) => {
+const PText = forwardRef(({ align = 'start', color = 'primary', ellipsis = false, size = 'small', tag = 'p', theme, weight = 'regular', className, children, ...rest }, ref) => {
     const elementRef = useRef();
     const WebComponentTag = usePrefix('p-text');
-    const propsToSync = [align, color, ellipsis, size, tag, theme, weight];
+    const propsToSync = [align, color, ellipsis, size, tag, theme || useTheme(), weight];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
         ['align', 'color', 'ellipsis', 'size', 'tag', 'theme', 'weight'].forEach((propName, i) => (current[propName] = propsToSync[i]));
@@ -22,7 +22,7 @@ const PText = forwardRef(({ align = 'start', color = 'primary', ellipsis = false
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsx(DSRText, { align, color, ellipsis, size, tag, theme, weight, children })),
+                children: (jsx(DSRText, { align, color, ellipsis, size, tag, theme: theme || useTheme(), weight, children })),
             }
             : {
                 children,

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

@@ -1,14 +1,14 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
-import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 import { DSRTextareaWrapper } from '../dsr-components/textarea-wrapper.mjs';
 
-const PTextareaWrapper = forwardRef(({ description = '', hideLabel = false, label = '', message = '', showCharacterCount, showCounter = true, state = 'none', theme = 'light', className, children, ...rest }, ref) => {
+const PTextareaWrapper = forwardRef(({ description = '', hideLabel = false, label = '', message = '', showCharacterCount, showCounter = true, state = 'none', theme, className, children, ...rest }, ref) => {
     const elementRef = useRef();
     const WebComponentTag = usePrefix('p-textarea-wrapper');
-    const propsToSync = [description, hideLabel, label, message, showCharacterCount, showCounter, state, theme];
+    const propsToSync = [description, hideLabel, label, message, showCharacterCount, showCounter, state, theme || useTheme()];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
         ['description', 'hideLabel', 'label', 'message', 'showCharacterCount', 'showCounter', 'state', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
@@ -22,7 +22,7 @@ const PTextareaWrapper = forwardRef(({ description = '', hideLabel = false, labe
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsx(DSRTextareaWrapper, { description, hideLabel, label, message, showCharacterCount, showCounter, state, theme, children })),
+                children: (jsx(DSRTextareaWrapper, { description, hideLabel, label, message, showCharacterCount, showCounter, state, theme: theme || useTheme(), children })),
             }
             : {
                 children,

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

@@ -1,16 +1,17 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
-import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 import { DSRToast } from '../dsr-components/toast.mjs';
 
-const PToast = forwardRef(({ theme = 'light', className, ...rest }, ref) => {
+const PToast = forwardRef(({ theme, className, ...rest }, ref) => {
     const elementRef = useRef();
     const WebComponentTag = usePrefix('p-toast');
+    const themeValue = useTheme();
     useBrowserLayoutEffect(() => {
-        elementRef.current.theme = theme;
-    }, [theme]);
+        elementRef.current.theme = theme || themeValue;
+    }, [theme, themeValue]);
     // @ts-ignore
     if (!process.browser) {
         className = className ? `${className} ssr` : 'ssr';
@@ -20,7 +21,7 @@ const PToast = forwardRef(({ theme = 'light', className, ...rest }, ref) => {
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsx(DSRToast, { theme })),
+                children: (jsx(DSRToast, { theme: theme || useTheme() })),
             }
             : {
                 suppressHydrationWarning: true,

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

@@ -1,14 +1,14 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
-import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 import { DSRWordmark } from '../dsr-components/wordmark.mjs';
 
-const PWordmark = forwardRef(({ aria, href, size = 'small', target = '_self', theme = 'light', className, ...rest }, ref) => {
+const PWordmark = forwardRef(({ aria, href, size = 'small', target = '_self', theme, className, ...rest }, ref) => {
     const elementRef = useRef();
     const WebComponentTag = usePrefix('p-wordmark');
-    const propsToSync = [aria, href, size, target, theme];
+    const propsToSync = [aria, href, size, target, theme || useTheme()];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
         ['aria', 'href', 'size', 'target', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
@@ -22,7 +22,7 @@ const PWordmark = forwardRef(({ aria, href, size = 'small', target = '_self', th
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsx(DSRWordmark, { aria, href, size, target, theme })),
+                children: (jsx(DSRWordmark, { aria, href, size, target, theme: theme || useTheme() })),
             }
             : {
                 suppressHydrationWarning: true,

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

@@ -85,7 +85,7 @@ class DSRButtonPure extends Component {
             theme: this.props.theme,
         };
         const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$Z(this.props.icon, this.props.iconSource, this.props.active, this.props.loading, this.isDisabledOrLoading, this.props.stretch, this.props.size, this.props.hideLabel, this.props.alignLabel, this.props.theme)));
-        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs("button", { ...getButtonPureAriaAttributes(this.props.disabled, this.props.loading, this.props.aria), className: "root", type: this.props.type, children: [this.props.loading ? (jsx(PSpinner, { aria: { 'aria-label': 'Loading state' }, ...iconProps })) : (hasIcon && (jsx(PIcon, { ...iconProps, name: this.props.icon, source: this.props.iconSource, color: this.isDisabledOrLoading ? 'state-disabled' : 'primary', theme: this.props.theme, "aria-hidden": "true" }))), jsx("span", { className: "label", children: jsx("slot", {}) })] })] }), this.props.children] }));
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), 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, children: [this.props.loading ? (jsx(PSpinner, { aria: { 'aria-label': 'Loading state' }, ...iconProps })) : (hasIcon && (jsx(PIcon, { ...iconProps, name: this.props.icon, source: this.props.iconSource, color: this.isDisabledOrLoading ? 'state-disabled' : 'primary', theme: this.props.theme, "aria-hidden": "true" }))), jsx("span", { className: "label", children: jsx("slot", {}) })] })] }), this.props.children] }));
     }
 }
 

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

@@ -75,7 +75,7 @@ class DSRButton extends Component {
     render() {
         splitChildren(this.props.children);
         const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$X(this.props.icon, this.props.iconSource, this.props.variant, this.props.hideLabel, this.props.disabled, this.props.loading, this.props.theme)));
-        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs("button", { ...getButtonAriaAttributes(this.props.disabled, this.props.loading, this.props.aria), className: "root", type: this.props.type, children: [this.props.loading && (jsx(PSpinner, { className: "spinner", size: "inherit", theme: this.props.theme, aria: { 'aria-label': 'Loading state' } })), hasVisibleIcon(this.props.icon, this.props.iconSource) && (jsx(PIcon, { className: "icon", size: "inherit", name: this.props.iconSource ? undefined : this.props.icon, source: this.props.iconSource, color: this.props.disabled ? (this.props.variant === 'primary' ? 'contrast-high' : 'state-disabled') : 'primary', theme: this.props.theme, "aria-hidden": "true" })), jsx("span", { className: "label", children: jsx("slot", {}) })] })] }), this.props.children] }));
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs("button", { ...getButtonAriaAttributes(this.props.disabled, this.props.loading, this.props.aria), className: "root", type: this.props.type, name: this.props.name, value: this.props.value, children: [this.props.loading && (jsx(PSpinner, { className: "spinner", size: "inherit", theme: this.props.theme, aria: { 'aria-label': 'Loading state' } })), hasVisibleIcon(this.props.icon, this.props.iconSource) && (jsx(PIcon, { className: "icon", size: "inherit", name: this.props.iconSource ? undefined : this.props.icon, source: this.props.iconSource, color: this.props.disabled ? (this.props.variant === 'primary' ? 'contrast-high' : 'state-disabled') : 'primary', theme: this.props.theme, "aria-hidden": "true" })), jsx("span", { className: "label", children: jsx("slot", {}) })] })] }), this.props.children] }));
     }
 }
 

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

@@ -69,14 +69,16 @@ import { minifyCss } from '../../minifyCss.mjs';
 import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.mjs';
 import { getCheckboxWrapperCss as getComponentCss$V } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
 import { StateMessage } from './state-message.mjs';
+import { Label } from './label.mjs';
 
 class DSRCheckboxWrapper extends Component {
     host;
     input;
     render() {
         const { children, namedSlotChildren, otherChildren } = splitChildren(this.props.children);
-        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$V(this.props.hideLabel, this.props.state, typeof otherChildren[0] === 'object' && 'props' in otherChildren[0] && otherChildren[0]?.props.disabled, this.props.loading, this.props.theme)));
-        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(Fragment, { children: [jsxs("label", { "aria-disabled": this.props.loading ? 'true' : null, children: [(this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0) && (jsx("span", { className: "text", children: this.props.label || jsx("slot", { name: "label" }) })), jsx("slot", {}), this.props.loading && (jsx(PSpinner, { className: "spinner", size: "inherit", theme: this.props.theme, aria: { 'aria-label': `Loading state of ${this.props.label}` } }))] }), (this.props.message || namedSlotChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(this.props.state) && (jsx(StateMessage, { state: this.props.state, message: this.props.message, theme: this.props.theme, host: null }))] })] }), this.props.children] }));
+        const { disabled } = typeof otherChildren[0] === 'object' && 'props' in otherChildren[0] && otherChildren[0]?.props || {};
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$V(this.props.hideLabel, this.props.state, disabled, this.props.loading, this.props.theme)));
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs("div", { className: "root", children: [jsx(Label, { hasLabel: this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0, hasDescription: this.props.description || namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0, host: null, label: this.props.label, isLoading: this.props.loading, isDisabled: disabled, formElement: typeof otherChildren[0] === 'object' && 'props' in otherChildren[0] && otherChildren[0]?.props }), jsxs("div", { className: "wrapper", children: [jsx("slot", {}), this.props.loading && (jsx(PSpinner, { className: "spinner", size: "inherit", theme: this.props.theme, aria: { 'aria-label': `Loading state of ${this.props.label}` } }))] }), 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, theme: this.props.theme, host: null })] })] }), this.props.children] }));
     }
 }
 

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

@@ -4,7 +4,7 @@ import { Component } from 'react';
 import { minifyCss } from '../../minifyCss.mjs';
 import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.mjs';
 import { getFieldsetWrapperCss as getComponentCss$Q } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
-import { StateMessage } from './state-message.mjs';
+import { messageId, StateMessage } from './state-message.mjs';
 import { Required } from './required.mjs';
 
 /** @deprecated since v3.0.0, will be removed with next major release. Please use "p-fieldset" instead. */
@@ -12,10 +12,9 @@ class DSRFieldsetWrapper extends Component {
     host;
     render() {
         const { children, namedSlotChildren, otherChildren } = splitChildren(this.props.children);
-        const messageId = 'message';
         const hasMessageValue = (this.props.message || namedSlotChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(this.props.state);
         const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$Q(this.props.state, this.props.labelSize, (this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0), this.props.theme)));
-        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs("fieldset", { "aria-describedby": hasMessageValue ? messageId : null, children: [(this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0) && (jsxs("legend", { children: [this.props.label || jsx("slot", { name: "label" }), this.props.required && jsx(Required, {})] })), jsx("slot", {}), hasMessageValue && (jsx(StateMessage, { id: messageId, state: this.props.state, message: this.props.message, theme: this.props.theme, host: null }))] })] }), this.props.children] }));
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs("fieldset", { "aria-describedby": hasMessageValue ? messageId : null, children: [(this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0) && (jsxs("legend", { children: [this.props.label || jsx("slot", { name: "label" }), this.props.required && jsx(Required, {})] })), jsx("slot", {}), jsx(StateMessage, { hasMessage: (this.props.message || namedSlotChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(this.props.state), state: this.props.state, message: this.props.message, theme: this.props.theme, host: null })] })] }), this.props.children] }));
     }
 }
 

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

@@ -4,17 +4,16 @@ import { Component } from 'react';
 import { minifyCss } from '../../minifyCss.mjs';
 import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.mjs';
 import { getFieldsetCss as getComponentCss$P } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
-import { StateMessage } from './state-message.mjs';
+import { messageId, StateMessage } from './state-message.mjs';
 import { Required } from './required.mjs';
 
 class DSRFieldset extends Component {
     host;
     render() {
         const { children, namedSlotChildren, otherChildren } = splitChildren(this.props.children);
-        const messageId = 'message';
         const hasMessageValue = (this.props.message || namedSlotChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(this.props.state);
         const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$P(this.props.state, this.props.labelSize, (this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0), this.props.theme)));
-        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs("fieldset", { "aria-describedby": hasMessageValue ? messageId : null, children: [(this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0) && (jsxs("legend", { children: [this.props.label || jsx("slot", { name: "label" }), this.props.required && jsx(Required, {})] })), jsx("slot", {}), hasMessageValue && (jsx(StateMessage, { id: messageId, state: this.props.state, message: this.props.message, theme: this.props.theme, host: null }))] })] }), this.props.children] }));
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs("fieldset", { "aria-describedby": hasMessageValue ? messageId : null, children: [(this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0) && (jsxs("legend", { children: [this.props.label || jsx("slot", { name: "label" }), this.props.required && jsx(Required, {})] })), jsx("slot", {}), jsx(StateMessage, { hasMessage: (this.props.message || namedSlotChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(this.props.state), state: this.props.state, message: this.props.message, theme: this.props.theme, host: null })] })] }), this.props.children] }));
     }
 }
 

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

@@ -0,0 +1,17 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { Required } from './required.mjs';
+
+const labelId = 'label';
+const descriptionId = 'description';
+const Label = ({ hasLabel, hasDescription, 
+// host,
+label, description, htmlFor, isRequired, isLoading, isDisabled,
+// formElement,
+ }) => {
+    return (jsxs(Fragment, { children: [jsx("label", { className: "label", id: labelId, "aria-disabled": isLoading || isDisabled ? 'true' : null, ...(htmlFor
+                    ? { htmlFor }
+                    : {}), children: hasLabel && (jsxs(Fragment, { children: [label || jsx("slot", { name: "label" }), ((isRequired /* && !isParentFieldsetRequired(host) */) /* ||
+                          (formElement && isRequiredAndParentNotRequired(// host, formElement)) */) && jsx(Required, {})] })) }), hasDescription && (jsx("span", { className: "label", id: descriptionId, "aria-disabled": isLoading || isDisabled ? 'true' : null, children: description || jsx("slot", { name: "description" }) }))] }));
+};
+
+export { Label, descriptionId, labelId };

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

@@ -70,6 +70,7 @@ import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.mjs';
 import { getMultiSelectCss as getComponentCss$x } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
 import { getSelectedOptionValues, getSelectedOptions } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
 import { StateMessage } from './state-message.mjs';
+import { Label } from './label.mjs';
 
 class DSRMultiSelect extends Component {
     host;
@@ -89,13 +90,11 @@ class DSRMultiSelect extends Component {
     }
     render() {
         const { children, namedSlotChildren, otherChildren } = splitChildren(this.props.children);
-        const labelId = 'label';
-        const messageId = 'message';
-        const descriptionId = 'description';
         const optionsSelectedId = 'options-selected';
         const dropdownId = 'list';
-        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$x('down', this.props.isOpen, this.props.disabled, this.props.hideLabel, this.props.state, this.props.isWithinForm, (this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0), this.props.theme)));
-        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(Fragment, { children: [jsxs("div", { className: "root", children: [jsxs("label", { className: "label", children: [(this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0) && (jsx("span", { id: labelId, className: "label__text", children: this.props.label || jsx("slot", { name: "label" }) })), (this.props.description || namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0) && (jsx("span", { id: descriptionId, className: "label__text", "aria-hidden": "true", children: this.props.description || jsx("slot", { name: "description" }) })), this.props.currentValue && (jsxs("span", { id: optionsSelectedId, className: "sr-text", children: [getSelectedOptions(this.props.multiSelectOptions).length, " options selected"] }))] }), jsxs("div", { className: "input-container", children: [jsx("input", { role: "combobox", autoComplete: "off", disabled: this.props.disabled, required: this.props.required, "aria-invalid": this.props.state === 'error' ? 'true' : null }), this.props.currentValue && (jsx(PButtonPure, { className: "icon reset-icon", icon: "close", hideLabel: "true", theme: this.props.theme, disabled: this.props.disabled, children: "Reset selection" })), jsx(PIcon, { className: "icon toggle-icon", name: "arrow-head-down", theme: this.props.theme, color: this.props.disabled ? 'state-disabled' : 'primary', "aria-hidden": "true" })] }), jsxs("div", { id: dropdownId, className: "listbox", children: [!this.props.hasFilterResults && (jsxs("div", { className: "no-results", "aria-live": "polite", role: "status", children: [jsx("span", { "aria-hidden": "true", children: "---" }), jsx("span", { className: "no-results__sr", children: "No results found" })] })), jsx("slot", {})] })] }), this.props.isWithinForm && jsx("slot", { name: "select" }), (this.props.message || namedSlotChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(this.props.state) && (jsx(StateMessage, { id: messageId, state: this.props.state, message: this.props.message, theme: this.props.theme, host: null })), jsx("span", { className: "sr-text", role: "status", "aria-live": "assertive", "aria-relevant": "additions text", children: this.props.srHighlightedOptionText })] })] }), this.props.children] }));
+        const inputId = 'filter';
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$x('down', this.props.isOpen, this.props.disabled, this.props.hideLabel, this.props.state, this.props.isWithinForm, this.props.theme)));
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs("div", { className: "root", children: [jsx(Label, { hasLabel: this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0, hasDescription: this.props.description || namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0, host: null, label: this.props.label, description: this.props.description, htmlFor: inputId, isRequired: this.props.required, isDisabled: this.props.disabled }), this.props.currentValue && (jsxs("span", { id: optionsSelectedId, className: "sr-only", children: [getSelectedOptions(this.props.multiSelectOptions).length, " options selected"] })), jsxs("div", { className: `wrapper${this.props.disabled ? ' disabled' : ''}`, children: [jsx("input", { id: inputId, role: "combobox", autoComplete: "off", disabled: this.props.disabled, required: this.props.required, "aria-invalid": this.props.state === 'error' ? 'true' : null }), jsx(PIcon, { className: "icon", name: "arrow-head-down", theme: this.props.theme, "aria-hidden": "true" }), this.props.currentValue && (jsx(PButtonPure, { className: "button", icon: "close", hideLabel: "true", theme: this.props.theme, disabled: this.props.disabled, children: "Reset selection" })), jsxs("div", { id: dropdownId, className: "listbox", children: [!this.props.hasFilterResults && (jsxs("div", { className: "no-results", "aria-live": "polite", role: "status", children: [jsx("span", { "aria-hidden": "true", children: "---" }), jsx("span", { className: "sr-only", children: "No results found" })] })), jsx("slot", {})] })] }), jsx(StateMessage, { hasMessage: (this.props.message || namedSlotChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(this.props.state), state: this.props.state, message: this.props.message, theme: this.props.theme, host: null }), jsx("span", { className: "sr-only", role: "status", "aria-live": "assertive", "aria-relevant": "additions text", children: this.props.srHighlightedOptionText }), this.props.isWithinForm && jsx("slot", { name: "internal-select" })] })] }), this.props.children] }));
     }
 }
 

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

@@ -68,8 +68,8 @@ import { Component } from 'react';
 import { minifyCss } from '../../minifyCss.mjs';
 import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.mjs';
 import { getPinCodeCss as getComponentCss$v } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
-import { hiddenInputSlotName } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
-import { StateMessage } from './state-message.mjs';
+import { messageId, StateMessage } from './state-message.mjs';
+import { Label, labelId, descriptionId } from './label.mjs';
 
 class DSRPinCode extends Component {
     host;
@@ -82,12 +82,9 @@ class DSRPinCode extends Component {
         // reset array of input elements
         this.inputElements = [];
         const currentInputId = 'current-input';
-        const labelId = 'label';
-        const descriptionId = 'description';
-        const messageId = 'message';
         const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$v(this.props.hideLabel, this.props.state, this.props.disabled, this.props.loading, this.props.isWithinForm, this.props.length, this.props.theme)));
-        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(Fragment, { children: [jsxs("label", { className: "label", htmlFor: currentInputId, children: [(this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0) && (jsx("span", { id: labelId, className: "label__text", children: this.props.label || jsx("slot", { name: "label" }) })), (this.props.description || namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0) && (jsx("span", { id: descriptionId, className: "label__text", children: this.props.description || jsx("slot", { name: "description" }) }))] }), jsxs("div", { className: "input-container", children: [this.props.loading && (jsx(PSpinner, { className: "spinner", size: "inherit", theme: this.props.theme, aria: { 'aria-label': 'Loading state' } })), this.props.isWithinForm && jsx("slot", { name: hiddenInputSlotName }), Array.from(Array(this.props.length), (_, index) => (jsx("input", { id: index === this.props.value.length ? currentInputId : null, type: this.props.type === 'number' ? 'text' : this.props.type, "aria-label": `${index + 1}-${this.props.length}`, "aria-describedby": `${labelId} ${descriptionId} ${messageId}`, "aria-invalid": this.props.state === 'error' ? 'true' : null, "aria-busy": this.props.loading ? 'true' : null, autoComplete: "one-time-code", pattern: "\\d*", inputMode: "numeric" // get numeric keyboard on mobile
-                                            , defaultValue: this.props.value[index] === ' ' ? null : this.props.value[index], disabled: this.props.disabled, required: this.props.required }, index)))] }), (this.props.message || namedSlotChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(this.props.state) && (jsx(StateMessage, { id: messageId, state: this.props.state, message: this.props.message, theme: this.props.theme, host: null }))] })] }), this.props.children] }));
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs("div", { className: "root", children: [jsx(Label, { hasLabel: this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0, hasDescription: this.props.description || namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0, host: null, label: this.props.label, description: this.props.description, htmlFor: currentInputId, isRequired: this.props.required, isLoading: this.props.loading, isDisabled: this.props.disabled }), jsxs("div", { className: "wrapper", children: [Array.from(Array(this.props.length), (_, index) => (jsx("input", { id: index === this.props.value.length ? currentInputId : null, type: this.props.type === 'number' ? 'text' : this.props.type, "aria-label": `${index + 1}-${this.props.length}`, "aria-describedby": `${labelId} ${descriptionId} ${messageId}`, "aria-invalid": this.props.state === 'error' ? 'true' : null, "aria-busy": this.props.loading ? 'true' : null, "aria-disabled": this.props.loading ? 'true' : null, autoComplete: "one-time-code", pattern: "\\d*", inputMode: "numeric" // get numeric keyboard on mobile
+                                            , defaultValue: this.props.value[index] === ' ' ? null : this.props.value[index], disabled: this.props.disabled, required: this.props.required }, index))), this.props.loading && (jsx(PSpinner, { className: "spinner", size: "inherit", theme: this.props.theme, aria: { 'aria-label': 'Loading state' } }))] }), 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, theme: this.props.theme, host: null }), this.props.isWithinForm && jsx("slot", { name: "internal-input" })] })] }), this.props.children] }));
     }
 }
 

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

@@ -69,16 +69,17 @@ import { minifyCss } from '../../minifyCss.mjs';
 import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.mjs';
 import { getRadioButtonWrapperCss as getComponentCss$t } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
 import { StateMessage } from './state-message.mjs';
+import { Label } from './label.mjs';
 
 class DSRRadioButtonWrapper extends Component {
     host;
     input;
     render() {
         const { children, namedSlotChildren, otherChildren } = splitChildren(this.props.children);
-        // spinner is only displayed when radio is not checked already
-        const isLoading = this.props.loading && !(typeof otherChildren[0] === 'object' && 'props' in otherChildren[0] && (otherChildren[0]?.props.checked || otherChildren[0]?.props.defaultChecked));
-        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$t(this.props.hideLabel, this.props.state, typeof otherChildren[0] === 'object' && 'props' in otherChildren[0] && otherChildren[0]?.props.disabled, isLoading, this.props.theme)));
-        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(Fragment, { children: [jsxs("label", { "aria-disabled": isLoading ? 'true' : null, children: [(this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0) && (jsx("span", { className: "text", children: this.props.label || jsx("slot", { name: "label" }) })), jsx("slot", {}), isLoading && (jsx(PSpinner, { className: "spinner", size: "inherit", theme: this.props.theme, aria: { 'aria-label': `Loading state of ${this.props.label}` } }))] }), (this.props.message || namedSlotChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(this.props.state) && (jsx(StateMessage, { state: this.props.state, message: this.props.message, theme: this.props.theme, host: null }))] })] }), this.props.children] }));
+        const { disabled } = typeof otherChildren[0] === 'object' && 'props' in otherChildren[0] && otherChildren[0]?.props || {};
+        const isLoading = this.props.loading && !(typeof otherChildren[0] === 'object' && 'props' in otherChildren[0] && (otherChildren[0]?.props.checked || otherChildren[0]?.props.defaultChecked)); // spinner is only displayed when radio is not checked already
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$t(this.props.hideLabel, this.props.state, disabled, isLoading, this.props.theme)));
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs("div", { className: "root", children: [jsx(Label, { hasLabel: this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0, hasDescription: this.props.description || namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0, host: null, label: this.props.label, isLoading: isLoading, isDisabled: disabled, formElement: typeof otherChildren[0] === 'object' && 'props' in otherChildren[0] && otherChildren[0]?.props }), jsxs("div", { className: "wrapper", children: [jsx("slot", {}), isLoading && (jsx(PSpinner, { className: "spinner", size: "inherit", theme: this.props.theme, aria: { 'aria-label': `Loading state of ${this.props.label}` } }))] }), 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, theme: this.props.theme, host: null })] })] }), this.props.children] }));
     }
 }
 

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

@@ -80,6 +80,8 @@ class DSRSelectWrapperDropdown extends Component {
         return 0;
     }
     render() {
+        // TODO: part won't be needed as soon as button/input of select-wrapper-dropdown is part of shadow dom of select-wrapper itself
+        const part = 'select-wrapper-dropdown';
         this.props.description && 'description';
         const buttonId = 'value';
         const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$p(this.props.direction === 'auto'
@@ -87,8 +89,12 @@ class DSRSelectWrapperDropdown extends Component {
             : this.props.direction, this.isOpen, this.props.state, this.props.disabled, this.props.filter, this.props.theme)));
         return (jsx(Fragment, { children: jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx(Fragment, { children: this.props.filter ? ([
                             jsx("input", { type: "text", role: "combobox", disabled: this.props.disabled, placeholder: getSelectedOptionMap(this.optionMaps)?.value || null, autoComplete: "off", defaultValue: this.searchString }, "input"),
-                            jsx("span", {}, "span"),
-                        ]) : (jsx("button", { type: "button", role: "combobox", id: buttonId, disabled: this.props.disabled })) })] }) }));
+                            jsx("span", { 
+                                /* @ts-ignore */
+                                part: part }, "span"),
+                        ]) : (jsx("button", { 
+                            /* @ts-ignore */
+                            part: part, type: "button", role: "combobox", id: buttonId, disabled: this.props.disabled })) })] }) }));
     }
 }
 

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

@@ -71,21 +71,18 @@ import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.mjs';
 import { getSelectWrapperCss as getComponentCss$o } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
 import { isCustomDropdown } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
 import { StateMessage } from './state-message.mjs';
+import { Label } from './label.mjs';
 
 class DSRSelectWrapper extends Component {
     host;
     select;
     iconElement;
-    dropdownElement;
     render() {
         const hasCustomDropdown = isCustomDropdown(this.props.filter, this.props.native);
         const { children, namedSlotChildren, otherChildren } = splitChildren(this.props.children);
         const { disabled } = typeof otherChildren[0] === 'object' && 'props' in otherChildren[0] && otherChildren[0]?.props || {};
-        const labelProps = disabled
-            ? {}
-            : {};
         const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$o(disabled, hasCustomDropdown, this.props.hideLabel, this.props.state, this.props.theme)));
-        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(Fragment, { children: [jsxs("div", { className: "root", children: [jsxs("label", { className: "label", children: [(this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0) && (jsx("span", { className: "label__text", ...labelProps, children: this.props.label || jsx("slot", { name: "label" }) })), (this.props.description || namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0) && (jsx("span", { className: "label__text", ...labelProps, children: this.props.description || jsx("slot", { name: "description" }) })), jsx(PIcon, { className: "icon", name: "arrow-head-down", theme: this.props.theme, color: disabled ? 'state-disabled' : 'primary', "aria-hidden": "true" }), jsx("slot", {})] }), hasCustomDropdown && !disabled && (jsx(PSelectWrapperDropdown, { selectRef: typeof otherChildren[0] === 'object' && 'props' in otherChildren[0] && otherChildren[0]?.props, label: this.props.label || namedSlotChildren.find(({ props: { slot } }) => slot === 'label')?.props.children, message: this.props.message || namedSlotChildren.find(({ props: { slot } }) => slot === 'message')?.props.children, description: this.props.description || namedSlotChildren.find(({ props: { slot } }) => slot === 'description')?.props.children, state: this.props.state, direction: this.props.dropdownDirection, filter: this.props.filter, theme: this.props.theme, required: false, disabled: disabled, onOpenChange: (isOpen) => this.props.iconElement.classList.toggle('icon--open', isOpen) }))] }), (this.props.message || namedSlotChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(this.props.state) && (jsx(StateMessage, { state: this.props.state, message: this.props.message, theme: this.props.theme, host: null }))] })] }), this.props.children] }));
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs("div", { className: "root", children: [jsx(Label, { hasLabel: this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0, hasDescription: this.props.description || namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0, host: null, label: this.props.label, description: this.props.description, isDisabled: disabled, formElement: typeof otherChildren[0] === 'object' && 'props' in otherChildren[0] && otherChildren[0]?.props }), jsxs("div", { className: "wrapper", children: [jsx("slot", {}), jsx(PIcon, { className: "icon", name: "arrow-head-down", theme: this.props.theme, color: disabled ? 'state-disabled' : 'primary', "aria-hidden": "true" }), hasCustomDropdown && !disabled && (jsx(PSelectWrapperDropdown, { className: "dropdown", selectRef: typeof otherChildren[0] === 'object' && 'props' in otherChildren[0] && otherChildren[0]?.props, label: this.props.label || namedSlotChildren.find(({ props: { slot } }) => slot === 'label')?.props.children, message: this.props.message || namedSlotChildren.find(({ props: { slot } }) => slot === 'message')?.props.children, description: this.props.description || namedSlotChildren.find(({ props: { slot } }) => slot === 'description')?.props.children, state: this.props.state, direction: this.props.dropdownDirection, filter: this.props.filter, theme: this.props.theme, required: false, disabled: disabled, onOpenChange: (isOpen) => this.props.iconElement.classList.toggle('icon--open', isOpen) }))] }), 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, theme: this.props.theme, host: null })] })] }), this.props.children] }));
     }
 }
 

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

@@ -65,9 +65,10 @@ import '../components/toast.wrapper.mjs';
 import '../components/wordmark.wrapper.mjs';
 import { getRole } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
 
-const StateMessage = ({ id, state, message, theme }) => {
+const messageId = 'message';
+const StateMessage = ({ hasMessage, state, message, theme }) => {
     const isErrorState = state === 'error';
-    return (jsxs("span", { id: id, className: "message", role: getRole(state), children: [jsx(PIcon, { name: isErrorState ? 'exclamation' : 'check', color: isErrorState ? 'notification-error' : 'notification-success', theme: theme, "aria-hidden": "true" }), message || jsx("slot", { name: "message" })] }));
+    return (hasMessage && (jsxs("span", { id: messageId, className: "message", role: getRole(state), children: [jsx(PIcon, { name: isErrorState ? 'exclamation' : 'check', color: isErrorState ? 'notification-error' : 'notification-success', theme: theme, "aria-hidden": "true" }), message || jsx("slot", { name: "message" })] })));
 };
 
-export { StateMessage };
+export { StateMessage, messageId };

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

@@ -72,6 +72,7 @@ import { getTabsBarCss as getComponentCss$c } from '../../../../../../components
 class DSRTabsBar extends Component {
     host;
     tabElements = [];
+    internalTabIndex = this.props.activeTabIndex; // to not override and mutate external prop value
     barElement;
     scrollerElement;
     direction = 'next';

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

@@ -70,6 +70,7 @@ import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.mjs';
 import { getTextFieldWrapperCss as getComponentCss$7 } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
 import { isWithinForm, hasLocateAction, showCustomCalendarOrTimeIndicator, isType } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
 import { StateMessage } from './state-message.mjs';
+import { Label } from './label.mjs';
 
 class DSRTextFieldWrapper extends Component {
     host;
@@ -91,7 +92,6 @@ class DSRTextFieldWrapper extends Component {
         const { children, namedSlotChildren, otherChildren } = splitChildren(this.props.children);
         const { readOnly, disabled, type } = typeof otherChildren[0] === 'object' && 'props' in otherChildren[0] && otherChildren[0]?.props || {};
         const disabledOrReadOnly = disabled || readOnly;
-        const labelProps = {};
         const buttonProps = {
             hideLabel: true,
             theme: this.props.theme,
@@ -106,12 +106,12 @@ class DSRTextFieldWrapper extends Component {
         const hasCounter = false; // hasCounterAndIsTypeText(otherChildren[0]?.props);
         const isClearable = typeof otherChildren[0] === 'object' && 'props' in otherChildren[0] && !!otherChildren[0]?.props.value;
         const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$7(disabled, this.props.hideLabel, this.props.state, this.props.isCounterVisible, this.props.isCounterVisible ? 'suffix' : this.props.unitPosition, isPassword ? 'password' : type, this.props.showPasswordToggle, this.props.isWithinForm, this.props.theme)));
-        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(Fragment, { children: [jsxs("div", { className: "root", children: [jsxs("label", { className: "label", children: [(this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0) && (jsx("span", { className: "label__text", ...labelProps, children: this.props.label || jsx("slot", { name: "label" }) })), (this.props.description || namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0) && (jsx("span", { className: "label__text", ...labelProps, children: this.props.description || jsx("slot", { name: "description" }) })), (this.props.isCounterVisible) && (jsx("span", { className: "unit", "aria-hidden": "true", children: this.props.unit })), jsx("slot", {}), hasCounter ] }), isPassword && this.props.showPasswordToggle ? (jsx(PButtonPure, { ...buttonProps, type: "button", icon: this.props.showPassword ? 'view-off' : 'view', disabled: disabled, aria: { 'aria-pressed': this.props.showPassword ? 'true' : 'false' }, children: "Toggle password visibility" })) : showCustomCalendarOrTimeIndicator(isCalendar, isTime) ? (jsx(PButtonPure, { ...buttonProps, type: "button", icon: isCalendar ? 'calendar' : 'clock', disabled: disabled, children: `Show ${isCalendar ? 'date' : 'time'} picker` })) : (isSearch && [
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs("div", { className: "root", children: [jsx(Label, { hasLabel: this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0, hasDescription: this.props.description || namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0, host: null, label: this.props.label, description: this.props.description, formElement: typeof otherChildren[0] === 'object' && 'props' in otherChildren[0] && otherChildren[0]?.props, isDisabled: disabled }), jsxs("div", { className: "wrapper", children: [jsx("slot", {}), hasCounter , (this.props.isCounterVisible) && (jsx("span", { className: "unit", "aria-hidden": "true", children: this.props.unit })), isPassword && this.props.showPasswordToggle ? (jsx(PButtonPure, { ...buttonProps, type: "button", icon: this.props.showPassword ? 'view-off' : 'view', disabled: disabled, aria: { 'aria-pressed': this.props.showPassword ? 'true' : 'false' }, children: "Toggle password visibility" })) : showCustomCalendarOrTimeIndicator(isCalendar, isTime) ? (jsxs(PButtonPure, { ...buttonProps, type: "button", icon: isCalendar ? 'calendar' : 'clock', disabled: disabled, children: ["Show $", isCalendar ? 'date' : 'time', " picker"] })) : (isSearch && [
                                             // TODO: create an own component, which would fix SSR support too
                                             this.props.isWithinForm ? (createElement(PButtonPure, { ...buttonProps, key: "btn-submit", type: "submit", icon: "search", disabled: disabledOrReadOnly }, "Search")) : (jsx(PIcon, { className: "icon", name: "search", color: "state-disabled", theme: this.props.theme, "aria-hidden": "true" }, "icon")),
-                                            createElement(PButtonPure, { ...buttonProps, type: "button", key: "btn-clear", icon: "close", tabIndex: -1, hidden: !isClearable, disabled: disabledOrReadOnly }, "Clear field"),
-                                            hasAction && (createElement(PButtonPure, { ...buttonProps, type: "button", key: "btn-action", icon: "locate", hidden: isClearable, disabled: disabledOrReadOnly, loading: this.props.actionLoading }, "Locate me")),
-                                        ])] }), (this.props.message || namedSlotChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(this.props.state) && (jsx(StateMessage, { state: this.props.state, message: this.props.message, theme: this.props.theme, host: null }))] })] }), this.props.children] }));
+                                            createElement(PButtonPure, { ...buttonProps, key: "btn-clear", type: "button", icon: "close", tabIndex: -1, hidden: !isClearable, disabled: disabledOrReadOnly }, "Clear field"),
+                                            hasAction && (createElement(PButtonPure, { ...buttonProps, key: "btn-action", type: "button", icon: "locate", hidden: isClearable, disabled: disabledOrReadOnly, loading: this.props.actionLoading }, "Locate me")),
+                                        ])] }), 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, theme: this.props.theme, host: null })] })] }), this.props.children] }));
     }
 }