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

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

@@ -4096,6 +4096,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';
@@ -5034,6 +5038,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;
@@ -5527,8 +5534,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',
+            },
         },
     };
 };
@@ -5635,13 +5646,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');
@@ -5666,8 +5776,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);
@@ -5675,18 +5783,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': {
@@ -5698,44 +5799,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': {
@@ -5749,23 +5813,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.
@@ -6923,6 +6971,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';
@@ -7523,7 +7574,7 @@ const getUnitCounterJssStyle = (isDisabled, isReadonly, theme) => {
         }),
         ...(isReadonly && {
             color: contrastHighColor,
-        })
+        }),
     };
 };
 
@@ -7597,12 +7648,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,
@@ -7631,14 +7681,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),
     });
@@ -7680,12 +7727,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: {
@@ -8173,6 +8220,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?
@@ -8563,7 +8615,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': {
@@ -8573,11 +8628,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)),
         },
     });
 };
@@ -11173,6 +11236,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/esm/components/dist/utils/esm/utils-entry.mjs

@@ -3447,10 +3447,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";
@@ -3916,4 +3912,4 @@ const getTextTagType = (host, tag) => {
     return tag;
 };
 
-export { DISPLAY_TAGS, HEADING_TAGS, HEADLINE_TAGS, ItemType, TEXT_TAGS, _hasShowPickerSupport, anchorSlot, attributeMutationMap, buildCrestImgSrc, buildCrestSrcSet, buildIconUrl, buildImgSrc, buildSrcSet, createPaginationItems, createRange, crestSize, debounce, descriptionId, displaySizeToTagMap, getButtonAriaAttributes, getButtonBaseAriaAttributes, getButtonPureAriaAttributes, getCDNBaseURL, getClosestHTMLElement, getComboboxAriaAttributes, getContentAriaAttributes, getCurrentActivePage, getDirectChildHTMLElement, getDisplayTagType, getHTMLElement, getHasNativePopoverSupport, getHeadingTagType, getHeadlineTagType, getIconColor, getInlineNotificationIconName, getInnerManifest, getListAriaAttributes, getOptionAriaAttributes, getRole, getSegmentedControlItemAriaAttributes, getSelectedOptionMap, getSelectedOptionString, getSelectedOptionValues, getSelectedOptions, getStepperHorizontalIconName, getSvgUrl, getSwitchButtonAriaAttributes, getTagName, getTagNameWithoutPrefix, getTextTagType, getTotalPages, hasDocument, hasLocateAction, hasSpecificDirectChildTag, hasVisibleIcon, hasWindow$1 as hasWindow, headerSlot, isCurrentInput, isCustomDropdown, isDisabledOrLoading, isElementOfKind, isInfinitePagination, isListTypeOrdered, isScrollable, isSortable, isStateCompleteOrWarning, isTouchDevice, isType, isUrl, isWithinForm, labelId, observedNodesMap, parseAndGetAriaAttributes, parseJSONAttribute, scrollAreaClass, showCustomCalendarOrTimeIndicator, supportsConstructableStylesheets, supportsNativePopover, tempDiv, tempIcon, tempLabel, traverseTreeAndUpdateState, updateDrilldownItemState };
+export { DISPLAY_TAGS, HEADING_TAGS, HEADLINE_TAGS, ItemType, TEXT_TAGS, _hasShowPickerSupport, anchorSlot, attributeMutationMap, buildCrestImgSrc, buildCrestSrcSet, buildIconUrl, buildImgSrc, buildSrcSet, createPaginationItems, createRange, crestSize, debounce, descriptionId, displaySizeToTagMap, getButtonAriaAttributes, getButtonBaseAriaAttributes, getButtonPureAriaAttributes, getCDNBaseURL, getClosestHTMLElement, getComboboxAriaAttributes, getContentAriaAttributes, getCurrentActivePage, getDirectChildHTMLElement, getDisplayTagType, getHTMLElement, getHasNativePopoverSupport, getHeadingTagType, getHeadlineTagType, getIconColor, getInlineNotificationIconName, getInnerManifest, getListAriaAttributes, getOptionAriaAttributes, getSegmentedControlItemAriaAttributes, getSelectedOptionMap, getSelectedOptionString, getSelectedOptionValues, getSelectedOptions, getStepperHorizontalIconName, getSvgUrl, getSwitchButtonAriaAttributes, getTagName, getTagNameWithoutPrefix, getTextTagType, getTotalPages, hasDocument, hasLocateAction, hasSpecificDirectChildTag, hasVisibleIcon, hasWindow$1 as hasWindow, headerSlot, isCurrentInput, isCustomDropdown, isDisabledOrLoading, isElementOfKind, isInfinitePagination, isListTypeOrdered, isScrollable, isSortable, isStateCompleteOrWarning, isTouchDevice, isType, isUrl, isWithinForm, labelId, observedNodesMap, parseAndGetAriaAttributes, parseJSONAttribute, scrollAreaClass, showCustomCalendarOrTimeIndicator, supportsConstructableStylesheets, supportsNativePopover, tempDiv, tempIcon, tempLabel, traverseTreeAndUpdateState, updateDrilldownItemState };

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

@@ -8,7 +8,7 @@ import { PInlineNotification } from '../components/inline-notification.wrapper.m
 
 /**
  * @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/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/canvas.mjs

@@ -31,10 +31,12 @@ class DSRCanvas extends 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(this.props.children);
         const hasTitle = namedSlotChildren.filter(({ props: { slot } }) => slot === 'title').length > 0;

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

@@ -8,7 +8,7 @@ import { parseAndGetAriaAttributes, hasVisibleIcon } from '../../../../../../com
 import { PIcon } from '../components/icon.wrapper.mjs';
 
 /**
- * @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 Component {
     host;

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

@@ -1,7 +1,6 @@
 import { jsx, Fragment } from 'react/jsx-runtime';
-import { Component } from 'react';
-import '../../provider.mjs';
 import { splitChildren } from '../../splitChildren.mjs';
+import { Component } from 'react';
 import { minifyCss } from '../../minifyCss.mjs';
 import { getMultiSelectOptionCss as getComponentCss$D } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
 
@@ -12,9 +11,9 @@ class DSRMultiSelectOption extends Component {
     host;
     render() {
         splitChildren(this.props.children);
-        const { theme = 'light', selected, highlighted } = this.props;
-        this.props.disabled || this.props.disabledParent;
-        minifyCss(getComponentCss$D(theme));
+        const { theme = 'light', selected: isSelected, highlighted } = this.props;
+        const isDisabled = this.props.disabled || this.props.disabledParent;
+        minifyCss(getComponentCss$D(theme, isDisabled, isSelected));
         return (jsx(Fragment, {}));
     }
 }

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

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

package/ssr/esm/lib/dsr-components/banner.d.ts

@@ -1,7 +1,7 @@
 import { Component } from 'react';
 /**
  * @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/esm/lib/dsr-components/canvas.d.ts

@@ -21,9 +21,5 @@ export declare class DSRCanvas extends Component<any> {
     private hasSidebarEndHeader;
     private hasFooter;
     private hasBackground;
-    private sidebarStart;
-    private sidebarEnd;
-    private root;
-    private header;
     render(): JSX.Element;
 }

package/ssr/esm/lib/dsr-components/link.d.ts

@@ -1,6 +1,6 @@
 import { Component } from 'react';
 /**
- * @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." }
  */
 export declare class DSRLink extends Component<any> {
     host: HTMLElement;