@porsche-design-system/components-react 3.28.0-rc.1 → 3.28.0-rc.3

package/LICENSE.md

@@ -21,7 +21,7 @@ update this licensing agreement at any time.
 Subject to the terms of this Agreement, Porsche grants you a limited, worldwide, royalty-free, non-assignable,
 non-transferable, non-sublicensable, and non-exclusive license to use the Porsche Design System Assets solely to
 develop, test, and distribute software applications, websites, and interfaces on behalf of Porsche that are available
-via www.porsche.com or any associated websites or other Porsche software (“Applications”).
+via [https://porsche.com](https://porsche.com) or any associated websites or other Porsche software (“Applications”).
 
 ### License Restrictions
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@porsche-design-system/components-react",
-  "version": "3.28.0-rc.1",
+  "version": "3.28.0-rc.3",
   "description": "Porsche Design System is a component library designed to help developers create the best experience for software or services distributed by Dr. Ing. h.c. F. Porsche AG.",
   "keywords": [
     "porsche",
@@ -17,7 +17,7 @@
   "license": "SEE LICENSE IN LICENSE",
   "homepage": "https://designsystem.porsche.com",
   "dependencies": {
-    "@porsche-design-system/components-js": "3.28.0-rc.1"
+    "@porsche-design-system/components-js": "3.28.0-rc.3"
   },
   "peerDependencies": {
     "ag-grid-community": ">= 33.0.0 <34.0.0",
@@ -75,6 +75,9 @@
       "import": "./styles/vanilla-extract/esm/vanilla-extract/index.mjs",
       "default": "./styles/vanilla-extract/cjs/vanilla-extract/index.cjs"
     },
+    "./tailwindcss": {
+      "style": "./tailwind/index.css"
+    },
     "./ag-grid": {
       "types": "./ag-grid/esm/index.d.ts",
       "import": "./ag-grid/esm/index.mjs",

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

@@ -4098,6 +4098,10 @@ const getBannerPopoverResetStyles = () => {
     };
 };
 
+/**
+ * @css-variable {"name": "--p-banner-position-top", "description": "Position top of banner", "defaultValue": "56px"}
+ * @css-variable {"name": "--p-banner-position-bottom", "description": "Position bottom of banner. Only has an effect below breakpoint 's'.", "defaultValue": "56px"}
+ */
 const cssVariableTop = '--p-banner-position-top';
 const cssVariableBottom = '--p-banner-position-bottom';
 const cssVariableZIndex = '--p-internal-banner-z-index';
@@ -5036,6 +5040,9 @@ const getComponentCss$16 = (theme, isSidebarStartOpen, isSidebarEndOpen) => {
     });
 };
 
+/**
+ * @css-variable {"name": "--p-carousel-prev-next-filter", "description": "CSS Filter applied to the navigation (prev/next buttons)", "defaultValue": "none"}
+ */
 const cssVariablePrevNextFilter = '--p-carousel-prev-next-filter';
 const cssVariableGradientColorWidth = '--p-gradient-color-width';
 const carouselTransitionDuration = motionDurationModerate;
@@ -5529,8 +5536,12 @@ const getFunctionalComponentStateMessageStyles = (theme, state, additionalDefaul
             ...prefersColorSchemeDarkMediaQuery(theme, {
                 color: getThemedFormStateColors('dark', state).formStateColor,
             }),
-            transition: getTransition('color'),
+            transition: `${getTransition('color')}, ${getTransition('opacity')}`,
             ...additionalDefaultJssStyle,
+            '&:empty': {
+                opacity: '0',
+                position: 'absolute',
+            },
         },
     };
 };
@@ -5637,13 +5648,112 @@ const getComponentCss$14 = (hideLabel, state, isDisabled, isLoading, theme) => {
     });
 };
 
+const cssVarInternalCheckboxScaling = '--p-internal-checkbox-scaling';
+const getCheckboxBaseStyles = (theme, isDisabled, isLoading, state, compact) => {
+    const { contrastMediumColor, disabledColor } = getThemedColors(theme);
+    const { contrastMediumColor: contrastMediumColorDark, disabledColor: disabledColorDark } = getThemedColors('dark');
+    const { formStateColor } = getThemedFormStateColors(theme, state);
+    const { formStateColor: formStateColorDark } = getThemedFormStateColors('dark', state);
+    const disabledOrLoading = isDisabledOrLoading(isDisabled, isLoading);
+    // TODO: needs to be extracted into a color function
+    const uncheckedColor = disabledOrLoading ? disabledColor : formStateColor || contrastMediumColor;
+    const uncheckedColorDark = disabledOrLoading ? disabledColorDark : formStateColorDark || contrastMediumColorDark;
+    const background = `transparent 0% 0% / ${fontLineHeight}`;
+    const minimumTouchTargetSize = '24px'; // Minimum touch target size to comply with accessibility guidelines.
+    const scalingVar = `var(${cssVarInternalCheckboxScaling}, ${compact ? 0.6668 : 1})`;
+    // Determines the scaling factor for the checkbox size. In "compact" mode, it uses 0.6668 to achieve a 20px checkbox (compact size).
+    // Defaults to 1 for the standard size and can be overridden by the CSS variable `cssVarInternalCheckboxScaling`.
+    const dimension = `calc(max(${SCALING_BASE_VALUE} * 0.75, ${scalingVar} * ${fontLineHeight}))`;
+    // Calculates the checkbox size and ensures a minimum size of 12px (0.75 * SCALING_BASE_VALUE).
+    // Scales proportionally with the line height and the scaling factor.
+    const dimensionFull = `calc(${dimension} + ${borderWidthBase} * 2)`; // Calculates the total size of the checkbox including its borders.
+    const touchTargetSizeDiff = `calc(${minimumTouchTargetSize} - ${dimensionFull})`; // Difference between the minimum touch target size and the checkbox full size.
+    const inset = `calc(-${borderWidthBase} - max(0px, ${touchTargetSizeDiff} / 2))`; // Positions the checkbox ::before pseudo-element with a negative offset to align it with the touch target.
+    return {
+        position: 'relative',
+        '&::before': {
+            // Ensures the touch target is at least 24px, even if the checkbox is smaller than the minimum touch target size.
+            // This pseudo-element expands the clickable area without affecting the visual size of the checkbox itself.
+            content: '""',
+            position: 'absolute',
+            inset,
+        },
+        width: dimension,
+        height: dimension,
+        font: `${fontSizeTextSmall} ${fontFamily}`, // needed for correct width and height definition based on ex-unit
+        display: 'block',
+        margin: 0,
+        padding: 0,
+        WebkitAppearance: 'none', // iOS safari
+        appearance: 'none',
+        boxSizing: 'content-box',
+        background,
+        transition: `${getTransition('background-color')}, ${getTransition('border-color')}`,
+        border: `${borderWidthBase} solid ${uncheckedColor}`,
+        outline: 0, // TODO: only relevant for VRT testing with forced states - prevents :focus style (in case getFocusJssStyle() condition is not matching)
+        ...(disabledOrLoading
+            ? {
+                pointerEvents: 'none', // to prevent form element becomes clickable/toggleable
+            }
+            : {
+                cursor: 'pointer',
+            }),
+        ...prefersColorSchemeDarkMediaQuery(theme, {
+            borderColor: uncheckedColorDark,
+        }),
+        gridArea: '1/1',
+        borderRadius: borderRadiusSmall,
+        ...addImportantToEachRule({
+            backgroundSize: 'cover',
+        }),
+    };
+};
+
 const getCheckedSVGBackgroundImage$1 = (fill) => {
     return getInlineSVGBackgroundImage(`<path fill="${fill}" d="m20.22,7.47l-1.47-1.42-9.26,9.02-4.24-4.15-1.47,1.42,5.71,5.6,10.73-10.47Z"/>`);
 };
+const getCheckboxCheckedBaseStyles = (theme, isDisabled, isLoading, state) => {
+    const { primaryColor, disabledColor } = getThemedColors(theme);
+    const { primaryColor: primaryColorDark, disabledColor: disabledColorDark } = getThemedColors('dark');
+    const { formStateColor } = getThemedFormStateColors(theme, state);
+    const { formStateColor: formStateColorDark } = getThemedFormStateColors('dark', state);
+    const { canvasTextColor } = getHighContrastColors();
+    const disabledOrLoading = isDisabledOrLoading(isDisabled, isLoading);
+    // TODO: needs to be extracted into a color function
+    const checkedColor = isHighContrastMode
+        ? canvasTextColor
+        : disabledOrLoading
+            ? disabledColor
+            : formStateColor || primaryColor;
+    const checkedColorDark = isHighContrastMode
+        ? canvasTextColor
+        : disabledOrLoading
+            ? disabledColorDark
+            : formStateColorDark || primaryColorDark;
+    const checkedIconColor = escapeHashCharacter(getInvertedThemedColors(theme).primaryColor);
+    const checkedIconColorDark = escapeHashCharacter(getInvertedThemedColors('dark').primaryColor);
+    return {
+        borderColor: checkedColor,
+        backgroundColor: checkedColor,
+        backgroundImage: getCheckedSVGBackgroundImage$1(checkedIconColor),
+        ...prefersColorSchemeDarkMediaQuery(theme, {
+            backgroundImage: getCheckedSVGBackgroundImage$1(checkedIconColorDark),
+            borderColor: checkedColorDark,
+            backgroundColor: checkedColorDark,
+        }),
+        // This is a workaround for Blink based browsers, which do not reflect the high contrast system colors (e.g.: "Canvas" and "CanvasText") when added to background SVG's.
+        ...(isHighContrastMode &&
+            getSchemedHighContrastMediaQuery({
+                backgroundImage: getCheckedSVGBackgroundImage$1('white'),
+            }, {
+                backgroundImage: getCheckedSVGBackgroundImage$1('black'),
+            })),
+    };
+};
+
 const getIndeterminateSVGBackgroundImage = (fill) => {
     return getInlineSVGBackgroundImage(`<path fill="${fill}" d="m20,11v2H4v-2h16Z"/>`);
 };
-const cssVarInternalCheckboxScaling = '--p-internal-checkbox-scaling';
 const getComponentCss$13 = (hideLabel, state, isDisabled, isLoading, compact, theme) => {
     const { primaryColor, contrastMediumColor, contrastHighColor, disabledColor, focusColor } = getThemedColors(theme);
     const { primaryColor: primaryColorDark, contrastMediumColor: contrastMediumColorDark, contrastHighColor: contrastHighColorDark, disabledColor: disabledColorDark, focusColor: focusColorDark, } = getThemedColors('dark');
@@ -5668,8 +5778,6 @@ const getComponentCss$13 = (hideLabel, state, isDisabled, isLoading, compact, th
             : formStateColorDark || primaryColorDark;
     const checkedHoverColor = formStateHoverColor || contrastHighColor;
     const checkedHoverColorDark = formStateHoverColorDark || contrastHighColorDark;
-    const checkedIconColor = escapeHashCharacter(getInvertedThemedColors(theme).primaryColor);
-    const checkedIconColorDark = escapeHashCharacter(getInvertedThemedColors('dark').primaryColor);
     const indeterminateIconColor = escapeHashCharacter(disabledOrLoading ? disabledColorDark : formStateColor || primaryColor);
     const indeterminateIconColorDark = escapeHashCharacter(formStateColorDark || primaryColorDark);
     const indeterminateIconHoverColor = escapeHashCharacter(formStateHoverColor || primaryColor);
@@ -5677,18 +5785,11 @@ const getComponentCss$13 = (hideLabel, state, isDisabled, isLoading, compact, th
     const background = `transparent 0% 0% / ${fontLineHeight}`;
     const minimumTouchTargetSize = '24px'; // Minimum touch target size to comply with accessibility guidelines.
     const scalingVar = `var(${cssVarInternalCheckboxScaling}, ${compact ? 0.6668 : 1})`;
-    // Determines the scaling factor for the checkbox size. In "compact" mode, it uses 0.6668 to achieve a 20px checkbox (compact size).
-    // Defaults to 1 for the standard size and can be overridden by the CSS variable `cssVarInternalCheckboxScaling`.
     const dimension = `calc(max(${SCALING_BASE_VALUE} * 0.75, ${scalingVar} * ${fontLineHeight}))`;
-    // Calculates the checkbox size and ensures a minimum size of 12px (0.75 * SCALING_BASE_VALUE).
-    // Scales proportionally with the line height and the scaling factor.
     const dimensionFull = `calc(${dimension} + ${borderWidthBase} * 2)`; // Calculates the total size of the checkbox including its borders.
     const touchTargetSizeDiff = `calc(${minimumTouchTargetSize} - ${dimensionFull})`; // Difference between the minimum touch target size and the checkbox full size.
     const paddingInlineStart = `calc(${spacingStaticSmall} - (max(0px, ${touchTargetSizeDiff})))`;
-    // Adjusts padding to maintain consistent spacing when the checkbox is smaller than the minimum touch target size.
-    // Uses asymmetric padding instead of `gap` to ensure there is no non-clickable area between the label and the input.
     const paddingTop = `calc((${dimensionFull} - ${fontLineHeight}) / 2)`; // Vertically centers the checkbox label relative to the checkbox size.
-    const inset = `calc(-${borderWidthBase} - max(0px, ${touchTargetSizeDiff} / 2))`; // Positions the checkbox ::before pseudo-element with a negative offset to align it with the touch target.
     const height = `calc(max(${fontLineHeight}, ${dimensionFull}))`; // Ensures the wrapper height matches either the font's line height or the full size of the checkbox, whichever is larger.
     return getCss({
         '@global': {
@@ -5700,44 +5801,7 @@ const getComponentCss$13 = (hideLabel, state, isDisabled, isLoading, compact, th
                 }),
             },
             ...preventFoucOfNestedElementsStyles,
-            input: {
-                position: 'relative',
-                '&::before': {
-                    // Ensures the touch target is at least 24px, even if the checkbox is smaller than the minimum touch target size.
-                    // This pseudo-element expands the clickable area without affecting the visual size of the checkbox itself.
-                    content: '""',
-                    position: 'absolute',
-                    inset,
-                },
-                width: dimension,
-                height: dimension,
-                font: `${fontSizeTextSmall} ${fontFamily}`, // needed for correct width and height definition based on ex-unit
-                display: 'block',
-                margin: 0,
-                padding: 0,
-                WebkitAppearance: 'none', // iOS safari
-                appearance: 'none',
-                boxSizing: 'content-box',
-                background,
-                transition: `${getTransition('background-color')}, ${getTransition('border-color')}`,
-                border: `${borderWidthBase} solid ${uncheckedColor}`,
-                outline: 0, // TODO: only relevant for VRT testing with forced states - prevents :focus style (in case getFocusJssStyle() condition is not matching)
-                ...(disabledOrLoading
-                    ? {
-                        pointerEvents: 'none', // to prevent form element becomes clickable/toggleable
-                    }
-                    : {
-                        cursor: 'pointer',
-                    }),
-                ...prefersColorSchemeDarkMediaQuery(theme, {
-                    borderColor: uncheckedColorDark,
-                }),
-                gridArea: '1/1',
-                borderRadius: borderRadiusSmall,
-                ...addImportantToEachRule({
-                    backgroundSize: 'cover',
-                }),
-            },
+            input: getCheckboxBaseStyles(theme, isDisabled, isLoading, state, compact),
             ...(isLoading
                 ? {
                     'input:checked': {
@@ -5751,23 +5815,7 @@ const getComponentCss$13 = (hideLabel, state, isDisabled, isLoading, compact, th
                     },
                 }
                 : {
-                    'input:checked': {
-                        borderColor: checkedColor,
-                        backgroundColor: checkedColor,
-                        backgroundImage: getCheckedSVGBackgroundImage$1(checkedIconColor),
-                        ...prefersColorSchemeDarkMediaQuery(theme, {
-                            backgroundImage: getCheckedSVGBackgroundImage$1(checkedIconColorDark),
-                            borderColor: checkedColorDark,
-                            backgroundColor: checkedColorDark,
-                        }),
-                        // This is a workaround for Blink based browsers, which do not reflect the high contrast system colors (e.g.: "Canvas" and "CanvasText") when added to background SVG's.
-                        ...(isHighContrastMode &&
-                            getSchemedHighContrastMediaQuery({
-                                backgroundImage: getCheckedSVGBackgroundImage$1('white'),
-                            }, {
-                                backgroundImage: getCheckedSVGBackgroundImage$1('black'),
-                            })),
-                    },
+                    'input:checked': getCheckboxCheckedBaseStyles(theme, isDisabled, isLoading, state),
                     'input:indeterminate': {
                         background, // Safari fix: ensures proper rendering of 'indeterminate' mode with 'checked' state.
                         borderColor: uncheckedColor, // Safari fix: ensures proper rendering of 'indeterminate' mode with 'checked' state.
@@ -6925,6 +6973,9 @@ const getDialogStickyAreaJssStyle = (area, theme) => {
     };
 };
 
+/**
+ * @css-variable {"name": "--p-flyout-width", "description": "Width of the flyout.", "defaultValue": "auto"}
+ */
 const cssVariableWidth$2 = '--p-flyout-width';
 // TODO: we shouldn't expose --p-flyout-max-width
 const cssVariableMaxWidth = '--p-flyout-max-width';
@@ -7525,7 +7576,7 @@ const getUnitCounterJssStyle = (isDisabled, isReadonly, theme) => {
         }),
         ...(isReadonly && {
             color: contrastHighColor,
-        })
+        }),
     };
 };
 
@@ -7599,12 +7650,11 @@ const getComponentCss$M = (disabled, hideLabel, state, toggle, compact, readOnly
                     borderColor: primaryColorDark,
                 }),
             },
-            ...hoverMediaQuery({
-                ...(!disabled &&
-                    !readOnly && {
+            ...(!disabled &&
+                !readOnly &&
+                hoverMediaQuery({
                     '&:hover:not(:has(.button:hover, input:focus ))': hoverStyles,
-                }),
-            }),
+                })),
             ...(disabled && {
                 cursor: 'not-allowed',
                 color: disabledColor,
@@ -7633,14 +7683,11 @@ const getComponentCss$M = (disabled, hideLabel, state, toggle, compact, readOnly
             },
         }),
         // .label / .required
-        ...getFunctionalComponentLabelStyles(disabled, hideLabel, theme, {
-            ...hoverMediaQuery({
-                ...(!disabled &&
-                    !readOnly && {
-                    '&:hover~.wrapper': hoverStyles,
-                }),
-            }),
-        }),
+        ...getFunctionalComponentLabelStyles(disabled, hideLabel, theme, !disabled &&
+            !readOnly &&
+            hoverMediaQuery({
+                '&:hover~.wrapper': hoverStyles,
+            })),
         // .message
         ...getFunctionalComponentStateMessageStyles(theme, state),
     });
@@ -7682,12 +7729,12 @@ const getComponentCss$K = (icon, iconSource, variant, hideLabel, hasSlottedAncho
         label: {
             clip: addImportantToRule('unset'), // to overrule breakpoint customizable hide-label style
         },
-        icon: {
-            ...(isPrimary &&
-                !isHighContrastMode && {
+        ...(isPrimary &&
+            !isHighContrastMode && {
+            icon: {
                 filter: 'invert(1)',
-            }),
-        },
+            },
+        }),
     }, hasSlottedAnchor && {
         ...(isHighContrastMode && {
             root: {
@@ -8175,6 +8222,11 @@ const getComponentCss$G = (size) => {
     });
 };
 
+/**
+ * @css-variable {"name": "--p-modal-width", "description": "Width of the modal.", "defaultValue": "auto"}
+ * @css-variable {"name": "--p-modal-spacing-top", "description": "Spacing of the modal to the top.", "defaultValue": "clamp(16px, 10vh, 192px)"}
+ * @css-variable {"name": "--p-modal-spacing-bottom", "description": "Spacing of the modal to the bottom.", "defaultValue": "clamp(16px, 10vh, 192px)"}
+ */
 const cssVariableWidth$1 = '--p-modal-width';
 const cssVariableSpacingTop = '--p-modal-spacing-top'; // TODO: maybe --p-modal-spacing-block-start would be more precise?
 const cssVariableSpacingBottom = '--p-modal-spacing-bottom'; // TODO: maybe --p-modal-spacing-block-end would be more precise?
@@ -8565,7 +8617,10 @@ optionHeight, theme) => {
     };
 };
 
-const getComponentCss$D = (theme) => {
+const getComponentCss$D = (theme, isDisabled, selected) => {
+    const dimension = `calc(max(${SCALING_BASE_VALUE} * 0.75, ${fontLineHeight}))`;
+    const dimensionFull = `calc(${dimension} + ${borderWidthBase} * 2)`; // Calculates the total size of the checkbox including its borders.
+    const paddingTop = `calc((${dimensionFull} - ${fontLineHeight}) / 2)`; // Vertically centers the checkbox label relative to the checkbox size.
     return getCss({
         '@global': {
             ':host': {
@@ -8575,11 +8630,19 @@ const getComponentCss$D = (theme) => {
                     ...hostHiddenStyles,
                 }),
             },
-            ...preventFoucOfNestedElementsStyles,
+            slot: {
+                display: 'block',
+                paddingTop,
+            },
+        },
+        option: {
+            ...getOptionJssStyle('multi-select-option', 1, theme),
+            columnGap: '8px',
         },
-        option: getOptionJssStyle('multi-select-option', 1, theme),
         checkbox: {
-            pointerEvents: 'none', // Avoid checkbox label click which updates input within p-checkbox-wrapper
+            flexShrink: 0,
+            ...getCheckboxBaseStyles(theme, isDisabled),
+            ...(selected && getCheckboxCheckedBaseStyles(theme, isDisabled)),
         },
     });
 };
@@ -11175,6 +11238,9 @@ const getComponentCss$3 = (isDisabled, isReadonly, hideLabel, state, hasCounter,
     });
 };
 
+/**
+ * @css-variable {"name": "--p-toast-position-bottom", "description": "Defines the spacing between the toast and the bottom edge of its container.", "defaultValue": "56px"}
+ */
 const cssVariablePositionBottom = '--p-toast-position-bottom'; // CSS custom property exposed as public interface
 const cssVariablePositionBottomInternal = '--p-internal-toast-position-bottom';
 const ANIMATION_DURATION = motionDurationModerate;

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

@@ -3449,10 +3449,6 @@ function debounce(fn, ms = 800) {
     };
 }
 
-const getRole = (state) => {
-    return state === 'error' ? 'alert' : state === 'success' ? 'status' : null;
-};
-
 const isWithinForm = (host) => !!getClosestHTMLElement(host, 'form');
 
 const getCDNBaseURL = () => global.PORSCHE_DESIGN_SYSTEM_CDN_URL + "/porsche-design-system";
@@ -3955,7 +3951,6 @@ exports.getInlineNotificationIconName = getInlineNotificationIconName;
 exports.getInnerManifest = getInnerManifest;
 exports.getListAriaAttributes = getListAriaAttributes;
 exports.getOptionAriaAttributes = getOptionAriaAttributes;
-exports.getRole = getRole;
 exports.getSegmentedControlItemAriaAttributes = getSegmentedControlItemAriaAttributes;
 exports.getSelectedOptionMap = getSelectedOptionMap;
 exports.getSelectedOptionString = getSelectedOptionString;

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

@@ -10,7 +10,7 @@ var inlineNotification_wrapper = require('../components/inline-notification.wrap
 
 /**
  * @slot {"name": "heading", "description": "Defines the heading used in the banner. Can be used alternatively to the heading prop. Can be used for rich content.", "hasAltProp": true }
- * @slot {"name": "title", "description": "Defines the title used in the banner. Can be used alternatively to the heading prop. Can be used for rich content.", "hasAltProp": true }
+ * @slot {"name": "title", "description": "Please use the heading prop or slot=\"heading\" instead.", "hasAltProp": true, "isDeprecated": true }
  * @slot {"name": "description", "description": "Defines the description used in the banner. Can be used alternatively to the description prop. Can be used for rich content.", "hasAltProp": true }
  *
  * @controlled {"props": ["open"], "event": "dismiss"}

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

@@ -33,10 +33,12 @@ class DSRCanvas extends react.Component {
     hasSidebarEndHeader;
     hasFooter;
     hasBackground;
-    sidebarStart;
-    sidebarEnd;
-    root;
-    header;
+    // TODO: Produces bug when using text-field-wrapper which looses focus
+    // private sidebarStart: any;
+    // private sidebarEnd: any;
+    // private root: any;
+    // private header: any;
+    // 
     render() {
         const { children, namedSlotChildren, otherChildren } = splitChildren.splitChildren(this.props.children);
         const hasTitle = namedSlotChildren.filter(({ props: { slot } }) => slot === 'title').length > 0;

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

@@ -10,7 +10,7 @@ var utilsEntry = require('../../../../../../components/dist/utils/esm/utils-entr
 var icon_wrapper = require('../components/icon.wrapper.cjs');
 
 /**
- * @slot {"name": "", "description": "Default slot to render the link label." }
+ * @slot {"name": "", "description": "Default slot to render the link label. This slot can be used to slot an anchor tag instead of using the href prop." }
  */
 class DSRLink extends react.Component {
     host;

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

@@ -1,9 +1,8 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
-require('../../provider.cjs');
 var splitChildren = require('../../splitChildren.cjs');
+var react = require('react');
 var minifyCss = require('../../minifyCss.cjs');
 var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.cjs');
 
@@ -14,9 +13,9 @@ class DSRMultiSelectOption extends react.Component {
     host;
     render() {
         splitChildren.splitChildren(this.props.children);
-        const { theme = 'light', selected, highlighted } = this.props;
-        this.props.disabled || this.props.disabledParent;
-        minifyCss.minifyCss(stylesEntry.getMultiSelectOptionCss(theme));
+        const { theme = 'light', selected: isSelected, highlighted } = this.props;
+        const isDisabled = this.props.disabled || this.props.disabledParent;
+        minifyCss.minifyCss(stylesEntry.getMultiSelectOptionCss(theme, isDisabled, isSelected));
         return (jsxRuntime.jsx(jsxRuntime.Fragment, {}));
     }
 }

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

@@ -3,13 +3,17 @@
 var jsxRuntime = require('react/jsx-runtime');
 require('react');
 require('../../provider.cjs');
-var utilsEntry = require('../../../../../../components/dist/utils/esm/utils-entry.cjs');
 var icon_wrapper = require('../components/icon.wrapper.cjs');
 
 const messageId = 'message';
 const StateMessage = ({ hasMessage, state, message, theme }) => {
     const isErrorState = state === 'error';
-    return (hasMessage && (jsxRuntime.jsxs("span", { id: messageId, className: "message", role: utilsEntry.getRole(state), children: [jsxRuntime.jsx(icon_wrapper.PIcon, { name: isErrorState ? 'exclamation' : 'check', color: isErrorState ? 'notification-error' : 'notification-success', theme: theme, "aria-hidden": "true" }), message || jsxRuntime.jsx("slot", { name: "message" })] })));
+    return (
+    // needs to be rendered always to have correct behaviour for screen readers
+    jsxRuntime.jsx("span", { id: messageId, className: "message", role: state === 'success' ? 'status' : 'alert', children: hasMessage && [
+            jsxRuntime.jsx(icon_wrapper.PIcon, { name: isErrorState ? 'exclamation' : 'check', color: isErrorState ? 'notification-error' : 'notification-success', theme: theme, "aria-hidden": "true" }),
+            message || jsxRuntime.jsx("slot", { name: "message" }),
+        ] }));
 };
 
 exports.StateMessage = StateMessage;