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

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

@@ -3951,7 +3951,7 @@ const formatObjectOutput = (value) => {
 'value, ' +
     formatObjectOutput(breakpoints.reduce((prev, key) => ({ ...prev, [key + (key !== 'base' ? '?' : '')]: 'value' }), {})).replace(/"/g, '');
 
-const getComponentCss$18 = (size, compact, open, theme, sticky) => {
+const getComponentCss$19 = (size, compact, open, theme, sticky) => {
     const { primaryColor, hoverColor, contrastLowColor, backgroundColor } = getThemedColors(theme);
     const { primaryColor: primaryColorDark, hoverColor: hoverColorDark, contrastLowColor: contrastLowColorDark, backgroundColor: backgroundColorDark, } = getThemedColors('dark');
     const cssVariablePositionStickyTop = '--p-accordion-position-sticky-top';
@@ -4121,7 +4121,7 @@ const cssVariableTop = '--p-banner-position-top';
 const cssVariableBottom = '--p-banner-position-bottom';
 const cssVariableZIndex = '--p-internal-banner-z-index';
 const topBottomFallback = '56px';
-const getComponentCss$17 = (isOpen) => {
+const getComponentCss$18 = (isOpen) => {
     return getCss({
         '@global': {
             ':host': {
@@ -4193,7 +4193,7 @@ const getGroupDirectionJssStyles = (direction) => {
     return groupDirectionJssStyles[direction];
 };
 
-const getComponentCss$16 = (direction) => {
+const getComponentCss$17 = (direction) => {
     return getCss({
         '@global': {
             ':host': {
@@ -4346,7 +4346,7 @@ const getFunctionalComponentLoadingMessageStyles = () => {
     };
 };
 
-const getComponentCss$15 = (icon, iconSource, active, isLoading, isDisabledOrLoading, stretch, size, hideLabel, alignLabel, underline, theme) => {
+const getComponentCss$16 = (icon, iconSource, active, isLoading, isDisabledOrLoading, stretch, size, hideLabel, alignLabel, underline, theme) => {
     const hasIcon = hasVisibleIcon(icon, iconSource);
     return getCss(mergeDeep(getLinkButtonPureStyles(icon, iconSource, active, isDisabledOrLoading, stretch, size, hideLabel, alignLabel, underline, false, theme), {
         root: {
@@ -4384,7 +4384,7 @@ const getFontWeight = (weight) => {
     return fontWeightMap[weight];
 };
 
-const getComponentCss$14 = (isDisabledOrLoading, aspectRatio, size, weight, background, align, compact, hasGradient, isDisabled) => {
+const getComponentCss$15 = (isDisabledOrLoading, aspectRatio, size, weight, background, align, compact, hasGradient, isDisabled) => {
     const isTopAligned = align === 'top';
     return getCss({
         '@global': {
@@ -4651,7 +4651,7 @@ const getDisabledColors = (variant, loading, theme) => {
     };
     return colors[variant === 'tertiary' ? 'secondary' : variant];
 };
-const getComponentCss$13 = (icon, iconSource, variant, hideLabel, disabled, loading, compact, theme) => {
+const getComponentCss$14 = (icon, iconSource, variant, hideLabel, disabled, loading, compact, theme) => {
     const disabledOrLoading = isDisabledOrLoading(disabled, loading);
     const { textColor, borderColor, backgroundColor } = getDisabledColors(variant, loading, theme);
     const { textColor: textColorDark, borderColor: borderColorDark, backgroundColor: backgroundColorDark, } = getDisabledColors(variant, loading, 'dark');
@@ -4712,7 +4712,7 @@ const gridProductiveGap = gridGap.replace('36px', '24px');
 const mediaQueryDesktopView = getMediaQueryMin('m');
 const sidebarWidth = '320px';
 const headerHeight = 'calc(1.5rem + 28px)';
-const getComponentCss$12 = (theme, isSidebarStartOpen, isSidebarEndOpen) => {
+const getComponentCss$13 = (theme, isSidebarStartOpen, isSidebarEndOpen) => {
     const { primaryColor, backgroundColor, backgroundSurfaceColor } = getThemedColors(theme);
     return getCss({
         '@global': {
@@ -4953,7 +4953,7 @@ const getGradient$1 = (theme, gradientColorTheme) => {
         `rgba(${gradientColor},0.3) 68%,` +
         `rgba(${gradientColor},0)`);
 };
-const getComponentCss$11 = (gradientColor, hasHeading, hasDescription, hasControlsSlot, headingSize, width, hasPagination, isInfinitePagination, alignHeader, theme, hasNavigation) => {
+const getComponentCss$12 = (gradientColor, hasHeading, hasDescription, hasControlsSlot, headingSize, width, hasPagination, isInfinitePagination, alignHeader, theme, hasNavigation) => {
     const { primaryColor, contrastMediumColor } = getThemedColors(theme);
     const { primaryColor: primaryColorDark, contrastMediumColor: contrastMediumColorDark } = getThemedColors('dark');
     const { canvasTextColor } = getHighContrastColors();
@@ -5093,16 +5093,19 @@ const getComponentCss$11 = (gradientColor, hasHeading, hasDescription, hasContro
                     WebkitUserSelect: 'none',
                     WebkitTouchCallout: 'none',
                 },
-                '&::before, &::after': {
-                    content: '""',
-                    position: 'absolute',
-                    zIndex: 1,
-                    top: 0,
-                    height: '100%',
-                    width: `var(${cssVariableGradientColorWidth}, 33%)`,
-                },
-                '&::before': getGradientStyles('right'),
-                '&::after': getGradientStyles('left'),
+                ...(gradientColor &&
+                    gradientColor !== 'none' && {
+                    '&::before, &::after': {
+                        content: '""',
+                        position: 'absolute',
+                        zIndex: 1,
+                        top: 0,
+                        height: '100%',
+                        width: `var(${cssVariableGradientColorWidth}, 33%)`,
+                    },
+                    '&::before': getGradientStyles('right'),
+                    '&::after': getGradientStyles('left'),
+                }),
             },
             '&__list': {
                 ...backfaceVisibilityJssStyle,
@@ -5399,26 +5402,17 @@ const getFunctionalComponentStateMessageStyles = (theme, state, additionalDefaul
     };
 };
 
-const getCheckedSVGBackgroundImage$1 = (fill) => {
+const getCheckedSVGBackgroundImage$2 = (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 getIndeterminateSVGBackgroundImage = (fill) => {
+const getIndeterminateSVGBackgroundImage$1 = (fill) => {
     return getInlineSVGBackgroundImage(`<path fill="${fill}" d="m20,11v2H4v-2h16Z"/>`);
 };
-const getComponentCss$10 = (hideLabel, state, isDisabled, isLoading, theme) => {
-    const { canvasColor } = getHighContrastColors();
-    const checkedIconColor = isHighContrastMode
-        ? canvasColor
-        : escapeHashCharacter(getInvertedThemedColors(theme).primaryColor);
-    const checkedIconColorDark = isHighContrastMode
-        ? canvasColor
-        : escapeHashCharacter(getInvertedThemedColors('dark').primaryColor);
-    const indeterminateIconColor = isHighContrastMode
-        ? canvasColor
-        : escapeHashCharacter(getThemedColors(theme).primaryColor);
-    const indeterminateIconColorDark = isHighContrastMode
-        ? canvasColor
-        : escapeHashCharacter(getThemedColors('dark').primaryColor);
+const getComponentCss$11 = (hideLabel, state, isDisabled, isLoading, theme) => {
+    const checkedIconColor = escapeHashCharacter(getInvertedThemedColors(theme).primaryColor);
+    const checkedIconColorDark = escapeHashCharacter(getInvertedThemedColors('dark').primaryColor);
+    const indeterminateIconColor = escapeHashCharacter(getThemedColors(theme).primaryColor);
+    const indeterminateIconColorDark = escapeHashCharacter(getThemedColors('dark').primaryColor);
     return getCss({
         '@global': {
             ':host': {
@@ -5439,16 +5433,30 @@ const getComponentCss$10 = (hideLabel, state, isDisabled, isLoading, theme) => {
                     // TODO: is it somehow useful possible to make following styles configurable by parameter?
                     ...(!isLoading && {
                         '&(input:checked)': {
-                            backgroundImage: getCheckedSVGBackgroundImage$1(checkedIconColor),
+                            backgroundImage: getCheckedSVGBackgroundImage$2(checkedIconColor),
                             ...prefersColorSchemeDarkMediaQuery(theme, {
-                                backgroundImage: getCheckedSVGBackgroundImage$1(checkedIconColorDark),
+                                backgroundImage: getCheckedSVGBackgroundImage$2(checkedIconColorDark),
                             }),
+                            // 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$2('white'),
+                                }, {
+                                    backgroundImage: getCheckedSVGBackgroundImage$2('black'),
+                                })),
                         },
                         '&(input:indeterminate)': {
-                            backgroundImage: getIndeterminateSVGBackgroundImage(indeterminateIconColor),
+                            backgroundImage: getIndeterminateSVGBackgroundImage$1(indeterminateIconColor),
                             ...prefersColorSchemeDarkMediaQuery(theme, {
-                                backgroundImage: getIndeterminateSVGBackgroundImage(indeterminateIconColorDark),
+                                backgroundImage: getIndeterminateSVGBackgroundImage$1(indeterminateIconColorDark),
                             }),
+                            // 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: getIndeterminateSVGBackgroundImage$1('black'),
+                                }, {
+                                    backgroundImage: getIndeterminateSVGBackgroundImage$1('white'),
+                                })),
                         },
                     }),
                 },
@@ -5496,6 +5504,216 @@ const getComponentCss$10 = (hideLabel, state, isDisabled, isLoading, theme) => {
     });
 };
 
+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 getIndeterminateSVGBackgroundImage = (fill) => {
+    return getInlineSVGBackgroundImage(`<path fill="${fill}" d="m20,11v2H4v-2h16Z"/>`);
+};
+const getComponentCss$10 = (hideLabel, state, isDisabled, isLoading, theme) => {
+    const { primaryColor, contrastMediumColor, contrastHighColor, disabledColor, focusColor } = getThemedColors(theme);
+    const { primaryColor: primaryColorDark, contrastMediumColor: contrastMediumColorDark, contrastHighColor: contrastHighColorDark, disabledColor: disabledColorDark, focusColor: focusColorDark, } = getThemedColors('dark');
+    const { formStateColor, formStateHoverColor } = getThemedFormStateColors(theme, state);
+    const { formStateColor: formStateColorDark, formStateHoverColor: formStateHoverColorDark } = getThemedFormStateColors('dark', state);
+    const { canvasTextColor } = getHighContrastColors();
+    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 uncheckedHoverColor = formStateHoverColor || primaryColor;
+    const uncheckedHoverColorDark = formStateHoverColorDark || primaryColorDark;
+    const checkedColor = isHighContrastMode
+        ? canvasTextColor
+        : disabledOrLoading
+            ? disabledColor
+            : formStateColor || primaryColor;
+    const checkedColorDark = isHighContrastMode
+        ? canvasTextColor
+        : disabledOrLoading
+            ? disabledColorDark
+            : 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);
+    const indeterminateIconHoverColorDark = escapeHashCharacter(formStateHoverColorDark || primaryColorDark);
+    const background = `transparent 0% 0% / ${fontLineHeight}`;
+    return getCss({
+        '@global': {
+            ':host': {
+                display: 'block',
+                ...addImportantToEachRule({
+                    ...colorSchemeStyles,
+                    ...hostHiddenStyles,
+                }),
+            },
+            ...preventFoucOfNestedElementsStyles,
+            input: {
+                width: fontLineHeight,
+                height: fontLineHeight,
+                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,
+            },
+            ...(!isLoading
+                ? {
+                    '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: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.
+                        backgroundImage: getIndeterminateSVGBackgroundImage(indeterminateIconColor),
+                        ...prefersColorSchemeDarkMediaQuery(theme, {
+                            backgroundImage: getIndeterminateSVGBackgroundImage(disabledOrLoading ? indeterminateIconColor : indeterminateIconColorDark),
+                            borderColor: uncheckedColorDark, // Safari fix: ensures proper rendering of 'indeterminate' mode with 'checked' state.
+                            backgroundColor: 'transparent', // Safari fix: ensures proper rendering of 'indeterminate' mode with 'checked' state.
+                        }),
+                        // 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: getIndeterminateSVGBackgroundImage('black'),
+                            }, {
+                                backgroundImage: getIndeterminateSVGBackgroundImage('white'),
+                            })),
+                    },
+                }
+                : {
+                    'input:checked': {
+                        // background-image is merged in later
+                        borderColor: checkedColor,
+                        backgroundColor: checkedColor,
+                        ...prefersColorSchemeDarkMediaQuery(theme, {
+                            borderColor: checkedColorDark,
+                            backgroundColor: checkedColorDark,
+                        }),
+                    },
+                }),
+            ...(!disabledOrLoading &&
+                !isHighContrastMode &&
+                hoverMediaQuery({
+                    'input:hover,label:hover~.wrapper input': {
+                        borderColor: uncheckedHoverColor,
+                        ...prefersColorSchemeDarkMediaQuery(theme, {
+                            borderColor: uncheckedHoverColorDark,
+                        }),
+                    },
+                    'input:checked:hover,label:hover~.wrapper input:checked': {
+                        borderColor: checkedHoverColor,
+                        backgroundColor: checkedHoverColor,
+                        ...prefersColorSchemeDarkMediaQuery(theme, {
+                            borderColor: checkedHoverColorDark,
+                            backgroundColor: checkedHoverColorDark,
+                        }),
+                    },
+                    'input:indeterminate:hover,label:hover~.wrapper input:indeterminate': {
+                        background, // Safari fix: ensures proper rendering of 'indeterminate' mode with 'checked' state.
+                        borderColor: uncheckedHoverColor, // Safari fix: ensures proper rendering of 'indeterminate' mode with 'checked' state.
+                        backgroundImage: getIndeterminateSVGBackgroundImage(escapeHashCharacter(indeterminateIconHoverColor)),
+                        ...prefersColorSchemeDarkMediaQuery(theme, {
+                            backgroundImage: getIndeterminateSVGBackgroundImage(escapeHashCharacter(indeterminateIconHoverColorDark)),
+                            borderColor: uncheckedHoverColorDark, // Safari fix: ensures proper rendering of 'indeterminate' mode
+                            backgroundColor: 'transparent',
+                        }),
+                    },
+                    'label:hover~.wrapper input': supportsChromiumMediaQuery({
+                        transition: 'unset', // Fixes chrome bug where transition properties are stuck on hover
+                    }),
+                })),
+            ...(!isDisabled && {
+                'input::-moz-focus-inner': {
+                    border: 0, // reset ua-style (for FF)
+                },
+                'input:focus': {
+                    outline: 0, // reset ua-style (for older browsers)
+                },
+                'input:focus-visible': {
+                    outline: `${borderWidthBase} solid ${focusColor}`,
+                    outlineOffset: '2px',
+                    ...prefersColorSchemeDarkMediaQuery(theme, {
+                        outlineColor: focusColorDark,
+                    }),
+                },
+            }),
+        },
+        root: {
+            display: 'grid',
+            gridTemplateColumns: 'auto minmax(0, 1fr)',
+            rowGap: spacingStaticXSmall,
+            ...(disabledOrLoading && {
+                cursor: 'not-allowed',
+            }),
+        },
+        wrapper: {
+            display: 'grid',
+            gridArea: '1/1',
+            alignSelf: 'flex-start', // in case label becomes multiline
+        },
+        ...(isLoading && {
+            spinner: {
+                position: 'relative', // ensure correct stacking, can be removed as soon as focus for input is handled with outline
+                gridArea: '1/1',
+                placeSelf: 'center',
+                width: fontLineHeight,
+                height: fontLineHeight,
+                font: `${fontSizeTextSmall} ${fontFamily}`, // needed for correct width and height definition based on ex-unit
+                pointerEvents: 'none',
+            },
+        }),
+        // .label / .required
+        ...getFunctionalComponentLabelStyles(isDisabled || isLoading, hideLabel, theme, {
+            gridArea: '1/2',
+            ...(isLoading && { pointerEvents: 'none' }), // prevent default htmlFor behavior. TODO: Remove as soon as label component for custom form components exists.
+        }, {
+            paddingTop: '2px', // compensate vertical alignment
+            paddingInlineStart: spacingStaticSmall, // asymmetric padding used instead of gap to prevent not clickable area between label and input
+        }),
+        // .message
+        ...getFunctionalComponentStateMessageStyles(theme, state, {
+            gridColumn: '1/3',
+        }),
+        // .loading
+        ...getFunctionalComponentLoadingMessageStyles(),
+    });
+};
+
 const widthMap = {
     narrow: gridNarrowOffset,
     basic: gridBasicOffset,
@@ -8500,12 +8718,8 @@ const getCheckedSVGBackgroundImage = (fill) => {
     return getInlineSVGBackgroundImage(`<circle fill="${fill}" cx="12" cy="12" r="6"/>`);
 };
 const getComponentCss$v = (hideLabel, state, isDisabled, isLoading, theme) => {
-    const checkedIconColor = isHighContrastMode
-        ? getHighContrastColors().canvasColor
-        : escapeHashCharacter(getInvertedThemedColors(theme).primaryColor);
-    const checkedIconColorDark = isHighContrastMode
-        ? getHighContrastColors().canvasColor
-        : escapeHashCharacter(getInvertedThemedColors('dark').primaryColor);
+    const checkedIconColor = escapeHashCharacter(getInvertedThemedColors(theme).primaryColor);
+    const checkedIconColorDark = escapeHashCharacter(getInvertedThemedColors('dark').primaryColor);
     return getCss({
         '@global': {
             ':host': {
@@ -8530,6 +8744,13 @@ const getComponentCss$v = (hideLabel, state, isDisabled, isLoading, theme) => {
                             ...prefersColorSchemeDarkMediaQuery(theme, {
                                 backgroundImage: getCheckedSVGBackgroundImage(checkedIconColorDark),
                             }),
+                            // 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('white'),
+                                }, {
+                                    backgroundImage: getCheckedSVGBackgroundImage('black'),
+                                })),
                         },
                     }),
                 },
@@ -10828,4 +11049,4 @@ const getComponentCss = (size, theme) => {
     });
 };
 
-export { getComponentCss$18 as getAccordionCss, getComponentCss$17 as getBannerCss, getComponentCss$13 as getButtonCss, getComponentCss$16 as getButtonGroupCss, getComponentCss$15 as getButtonPureCss, getComponentCss$14 as getButtonTileCss, getComponentCss$12 as getCanvasCss, getComponentCss$11 as getCarouselCss, getComponentCss$10 as getCheckboxWrapperCss, getComponentCss$$ as getContentWrapperCss, getComponentCss$_ as getCrestCss, getComponentCss$Z as getDisplayCss, getComponentCss$Y as getDividerCss, getComponentCss$W as getFieldsetCss, getComponentCss$X as getFieldsetWrapperCss, getComponentCss$U as getFlexCss, getComponentCss$V as getFlexItemCss, getComponentCss$R as getFlyoutCss, getComponentCss$T as getFlyoutMultilevelCss, getComponentCss$S as getFlyoutMultilevelItemCss, getFunctionalComponentLabelStyles, getFunctionalComponentLoadingMessageStyles, getFunctionalComponentRequiredStyles, getFunctionalComponentStateMessageStyles, getComponentCss$P as getGridCss, getComponentCss$Q as getGridItemCss, getComponentCss$O as getHeadingCss, getComponentCss$N as getHeadlineCss, getComponentCss$M as getIconCss, getComponentCss$L as getInlineNotificationCss, getComponentCss$J as getLinkCss, getComponentCss$K as getLinkPureCss, getComponentCss$J as getLinkSocialCss, getComponentCss$G as getLinkTileCss, getComponentCss$I as getLinkTileModelSignatureCss, getComponentCss$H as getLinkTileProductCss, getComponentCss$F as getMarqueCss, getComponentCss$E as getModalCss, getComponentCss$D as getModelSignatureCss, getComponentCss$B as getMultiSelectCss, getComponentCss$C as getMultiSelectOptionCss, getComponentCss$z as getOptgroupCss, getComponentCss$y as getPaginationCss, getComponentCss$x as getPinCodeCss, getComponentCss$w as getPopoverCss, getComponentCss$v as getRadioButtonWrapperCss, getComponentCss$u as getScrollerCss, getComponentCss$s as getSegmentedControlCss, getComponentCss$t as getSegmentedControlItemCss, getComponentCss$p as getSelectCss, getComponentCss$A as getSelectOptionCss, getComponentCss$q as getSelectWrapperCss, getComponentCss$r as getSelectWrapperDropdownCss, getComponentCss$o as getSpinnerCss, getComponentCss$m as getStepperHorizontalCss, getComponentCss$n as getStepperHorizontalItemCss, getComponentCss$l as getSwitchCss, getComponentCss$k as getTableBodyCss, getComponentCss$j as getTableCellCss, getComponentCss$i as getTableCss, getComponentCss$h as getTableHeadCellCss, getComponentCss$f as getTableHeadCss, getComponentCss$g as getTableHeadRowCss, getComponentCss$e as getTableRowCss, getComponentCss$d as getTabsBarCss, getComponentCss$b as getTabsCss, getComponentCss$c as getTabsItemCss, getComponentCss$9 as getTagCss, getComponentCss$a as getTagDismissibleCss, getComponentCss$5 as getTextCss, getComponentCss$8 as getTextFieldWrapperCss, getComponentCss$7 as getTextListCss, getComponentCss$6 as getTextListItemCss, getComponentCss$3 as getTextareaCss, getComponentCss$4 as getTextareaWrapperCss, getComponentCss$1 as getToastCss, getComponentCss as getWordmarkCss };
+export { getComponentCss$19 as getAccordionCss, getComponentCss$18 as getBannerCss, getComponentCss$14 as getButtonCss, getComponentCss$17 as getButtonGroupCss, getComponentCss$16 as getButtonPureCss, getComponentCss$15 as getButtonTileCss, getComponentCss$13 as getCanvasCss, getComponentCss$12 as getCarouselCss, getComponentCss$10 as getCheckboxCss, getComponentCss$11 as getCheckboxWrapperCss, getComponentCss$$ as getContentWrapperCss, getComponentCss$_ as getCrestCss, getComponentCss$Z as getDisplayCss, getComponentCss$Y as getDividerCss, getComponentCss$W as getFieldsetCss, getComponentCss$X as getFieldsetWrapperCss, getComponentCss$U as getFlexCss, getComponentCss$V as getFlexItemCss, getComponentCss$R as getFlyoutCss, getComponentCss$T as getFlyoutMultilevelCss, getComponentCss$S as getFlyoutMultilevelItemCss, getFunctionalComponentLabelStyles, getFunctionalComponentLoadingMessageStyles, getFunctionalComponentRequiredStyles, getFunctionalComponentStateMessageStyles, getComponentCss$P as getGridCss, getComponentCss$Q as getGridItemCss, getComponentCss$O as getHeadingCss, getComponentCss$N as getHeadlineCss, getComponentCss$M as getIconCss, getComponentCss$L as getInlineNotificationCss, getComponentCss$J as getLinkCss, getComponentCss$K as getLinkPureCss, getComponentCss$J as getLinkSocialCss, getComponentCss$G as getLinkTileCss, getComponentCss$I as getLinkTileModelSignatureCss, getComponentCss$H as getLinkTileProductCss, getComponentCss$F as getMarqueCss, getComponentCss$E as getModalCss, getComponentCss$D as getModelSignatureCss, getComponentCss$B as getMultiSelectCss, getComponentCss$C as getMultiSelectOptionCss, getComponentCss$z as getOptgroupCss, getComponentCss$y as getPaginationCss, getComponentCss$x as getPinCodeCss, getComponentCss$w as getPopoverCss, getComponentCss$v as getRadioButtonWrapperCss, getComponentCss$u as getScrollerCss, getComponentCss$s as getSegmentedControlCss, getComponentCss$t as getSegmentedControlItemCss, getComponentCss$p as getSelectCss, getComponentCss$A as getSelectOptionCss, getComponentCss$q as getSelectWrapperCss, getComponentCss$r as getSelectWrapperDropdownCss, getComponentCss$o as getSpinnerCss, getComponentCss$m as getStepperHorizontalCss, getComponentCss$n as getStepperHorizontalItemCss, getComponentCss$l as getSwitchCss, getComponentCss$k as getTableBodyCss, getComponentCss$j as getTableCellCss, getComponentCss$i as getTableCss, getComponentCss$h as getTableHeadCellCss, getComponentCss$f as getTableHeadCss, getComponentCss$g as getTableHeadRowCss, getComponentCss$e as getTableRowCss, getComponentCss$d as getTabsBarCss, getComponentCss$b as getTabsCss, getComponentCss$c as getTabsItemCss, getComponentCss$9 as getTagCss, getComponentCss$a as getTagDismissibleCss, getComponentCss$5 as getTextCss, getComponentCss$8 as getTextFieldWrapperCss, getComponentCss$7 as getTextListCss, getComponentCss$6 as getTextListItemCss, getComponentCss$3 as getTextareaCss, getComponentCss$4 as getTextareaWrapperCss, getComponentCss$1 as getToastCss, getComponentCss as getWordmarkCss };

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

@@ -5,22 +5,22 @@ import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMerge
 import { syncRef } from '../../utils.mjs';
 import { DSRCarousel } from '../dsr-components/carousel.mjs';
 
-const PCarousel = forwardRef(({ activeSlideIndex = 0, alignHeader = 'start', aria, description, disablePagination, focusOnCenterSlide = false, gradientColor = 'none', heading, headingSize = 'x-large', intl, onCarouselChange, onUpdate, pagination = true, rewind = true, skipLinkTarget, slidesPerPage = 1, theme, width = 'basic', wrapContent, className, children, ...rest }, ref) => {
+const PCarousel = forwardRef(({ activeSlideIndex = 0, alignHeader = 'start', aria, description, disablePagination, focusOnCenterSlide = false, gradientColor = 'none', heading, headingSize = 'x-large', intl, onCarouselChange, onUpdate, pagination = true, rewind = true, skipLinkTarget, slidesPerPage = 1, theme, trimSpace = true, width = 'basic', wrapContent, className, children, ...rest }, ref) => {
     const elementRef = useRef();
     useEventCallback(elementRef, 'carouselChange', onCarouselChange);
     useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = usePrefix('p-carousel');
-    const propsToSync = [activeSlideIndex, alignHeader, aria, description, disablePagination, focusOnCenterSlide, gradientColor, heading, headingSize, intl, pagination, rewind, skipLinkTarget, slidesPerPage, theme || useTheme(), width, wrapContent];
+    const propsToSync = [activeSlideIndex, alignHeader, aria, description, disablePagination, focusOnCenterSlide, gradientColor, heading, headingSize, intl, pagination, rewind, skipLinkTarget, slidesPerPage, theme || useTheme(), trimSpace, width, wrapContent];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['activeSlideIndex', 'alignHeader', 'aria', 'description', 'disablePagination', 'focusOnCenterSlide', 'gradientColor', 'heading', 'headingSize', 'intl', 'pagination', 'rewind', 'skipLinkTarget', 'slidesPerPage', 'theme', 'width', 'wrapContent'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['activeSlideIndex', 'alignHeader', 'aria', 'description', 'disablePagination', 'focusOnCenterSlide', 'gradientColor', 'heading', 'headingSize', 'intl', 'pagination', 'rewind', 'skipLinkTarget', 'slidesPerPage', 'theme', 'trimSpace', 'width', 'wrapContent'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsx(DSRCarousel, { activeSlideIndex, alignHeader, aria, description, disablePagination, focusOnCenterSlide, gradientColor, heading, headingSize, intl, pagination, rewind, skipLinkTarget, slidesPerPage, theme: theme || useTheme(), width, wrapContent, children })),
+                children: (jsx(DSRCarousel, { activeSlideIndex, alignHeader, aria, description, disablePagination, focusOnCenterSlide, gradientColor, heading, headingSize, intl, pagination, rewind, skipLinkTarget, slidesPerPage, theme: theme || useTheme(), trimSpace, width, wrapContent, children })),
             }
             : {
                 children,

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

@@ -0,0 +1,37 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useRef } from 'react';
+import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { syncRef } from '../../utils.mjs';
+import { DSRCheckbox } from '../dsr-components/checkbox.mjs';
+
+const PCheckbox = forwardRef(({ checked = false, disabled = false, form, hideLabel = false, indeterminate = false, label = '', loading = false, message = '', name = '', onBlur, onUpdate, required = false, state = 'none', theme, value = 'on', className, children, ...rest }, ref) => {
+    const elementRef = useRef();
+    useEventCallback(elementRef, 'blur', onBlur);
+    useEventCallback(elementRef, 'update', onUpdate);
+    const WebComponentTag = usePrefix('p-checkbox');
+    const propsToSync = [checked, disabled, form, hideLabel, indeterminate, label, loading, message, name, required, state, theme || useTheme(), value];
+    useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['checked', 'disabled', 'form', 'hideLabel', 'indeterminate', 'label', 'loading', 'message', 'name', 'required', 'state', 'theme', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+    }, propsToSync);
+    const props = {
+        ...rest,
+        // @ts-ignore
+        ...(!process.browser
+            ? {
+                children: (jsx(DSRCheckbox, { checked, disabled, form, hideLabel, indeterminate, label, loading, message, name, required, state, theme: theme || useTheme(), value, children })),
+            }
+            : {
+                children,
+                suppressHydrationWarning: true,
+            }),
+        'data-ssr': '',
+        class: useMergedClass(elementRef, className),
+        ref: syncRef(elementRef, ref)
+    };
+    // @ts-ignore
+    return jsx(WebComponentTag, { ...props });
+});
+
+export { PCheckbox };

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

@@ -5,7 +5,7 @@ import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMerge
 import { syncRef } from '../../utils.mjs';
 import { DSRTextarea } from '../dsr-components/textarea.mjs';
 
-const PTextarea = forwardRef(({ autoComplete = '', description = '', disabled = false, form, hideLabel = false, label = '', maxLength, message = '', minLength, name, onBlur, onChange, onInput, placeholder = '', readOnly = false, required = false, resize = 'vertical', rows = 7, showCounter = true, spellCheck, state = 'none', theme, value = '', wrap = 'soft', className, ...rest }, ref) => {
+const PTextarea = forwardRef(({ autoComplete = '', description = '', disabled = false, form, hideLabel = false, label = '', maxLength, message = '', minLength, name, onBlur, onChange, onInput, placeholder = '', readOnly = false, required = false, resize = 'vertical', rows = 7, showCounter = true, spellCheck, state = 'none', theme, value = '', wrap = 'soft', className, children, ...rest }, ref) => {
     const elementRef = useRef();
     useEventCallback(elementRef, 'blur', onBlur);
     useEventCallback(elementRef, 'change', onChange);
@@ -21,9 +21,10 @@ const PTextarea = forwardRef(({ autoComplete = '', description = '', disabled =
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsx(DSRTextarea, { autoComplete, description, disabled, form, hideLabel, label, maxLength, message, minLength, name, placeholder, readOnly, required, resize, rows, showCounter, spellCheck, state, theme: theme || useTheme(), value, wrap })),
+                children: (jsx(DSRTextarea, { autoComplete, description, disabled, form, hideLabel, label, maxLength, message, minLength, name, placeholder, readOnly, required, resize, rows, showCounter, spellCheck, state, theme: theme || useTheme(), value, wrap, children })),
             }
             : {
+                children,
                 suppressHydrationWarning: true,
             }),
         'data-ssr': '',

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

@@ -7,6 +7,7 @@ import '../components/button-pure.wrapper.mjs';
 import '../components/button-tile.wrapper.mjs';
 import '../components/canvas.wrapper.mjs';
 import '../components/carousel.wrapper.mjs';
+import '../components/checkbox.wrapper.mjs';
 import '../components/checkbox-wrapper.wrapper.mjs';
 import '../components/content-wrapper.wrapper.mjs';
 import '../components/crest.wrapper.mjs';
@@ -75,7 +76,7 @@ import { splitChildren } from '../../splitChildren.mjs';
 import { Component } from 'react';
 import { minifyCss } from '../../minifyCss.mjs';
 import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.mjs';
-import { getAccordionCss as getComponentCss$18 } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
+import { getAccordionCss as getComponentCss$19 } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
 
 /**
  * @slot {"name": "heading", "description": "Defines the heading used in the accordion. Can be used alternatively to the heading prop. Please **refrain** from using any other than text content as slotted markup." }
@@ -90,7 +91,7 @@ class DSRAccordion extends Component {
         const buttonId = 'accordion-control';
         const contentId = 'accordion-panel';
         const Heading = this.props.tag || this.props.headingTag;
-        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$18(this.props.size, this.props.compact, this.props.open, this.props.theme, this.props.sticky)));
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$19(this.props.size, this.props.compact, this.props.open, this.props.theme, this.props.sticky)));
         return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(Fragment, { children: [jsx(Heading, { className: "heading", children: jsxs("button", { id: buttonId, type: "button", "aria-expanded": this.props.open ? 'true' : 'false', "aria-controls": contentId, children: [this.props.heading || jsx("slot", { name: "heading" }), jsx("span", { className: "icon-container", children: jsx(PIcon, { className: "icon", name: this.props.open ? 'minus' : 'plus', theme: this.props.theme, size: "xx-small", "aria-hidden": "true" }) })] }) }), jsx("div", { id: contentId, className: "collapsible", role: "region", "aria-labelledby": buttonId, children: jsx("div", { children: jsx("slot", {}) }) })] })] }), this.props.children] }));
     }
 }

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

@@ -7,6 +7,7 @@ import '../components/button-pure.wrapper.mjs';
 import '../components/button-tile.wrapper.mjs';
 import '../components/canvas.wrapper.mjs';
 import '../components/carousel.wrapper.mjs';
+import '../components/checkbox.wrapper.mjs';
 import '../components/checkbox-wrapper.wrapper.mjs';
 import '../components/content-wrapper.wrapper.mjs';
 import '../components/crest.wrapper.mjs';
@@ -75,7 +76,7 @@ import { splitChildren } from '../../splitChildren.mjs';
 import { Component } from 'react';
 import { minifyCss } from '../../minifyCss.mjs';
 import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.mjs';
-import { getBannerCss as getComponentCss$17 } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
+import { getBannerCss as getComponentCss$18 } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
 
 /**
  * @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 }
@@ -94,7 +95,7 @@ class DSRBanner extends Component {
     render() {
         const { children, namedSlotChildren, otherChildren } = splitChildren(this.props.children);
         const hasTitleSlot = namedSlotChildren.filter(({ props: { slot } }) => slot === 'title').length > 0;
-        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$17(this.props.open)));
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$18(this.props.open)));
         return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx(Fragment, { children: jsxs(PInlineNotification, { heading: this.props.heading, headingTag: this.props.headingTag, description: this.props.description, state: this.props.state, dismissButton: this.hasDismissButton, theme: this.props.theme, "aria-hidden": !this.props.open ? 'true' : 'false', children: [namedSlotChildren.filter(({ props: { slot } }) => slot === 'heading').length > 0 ? (jsx("slot", { name: "heading", slot: "heading" })) : (hasTitleSlot && jsx("slot", { name: "title", slot: "heading" })), namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0 && jsx("slot", { name: "description" })] }) })] }), this.props.children] }));
     }
 }

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

@@ -3,7 +3,7 @@ import { splitChildren } from '../../splitChildren.mjs';
 import { Component } from 'react';
 import { minifyCss } from '../../minifyCss.mjs';
 import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.mjs';
-import { getButtonGroupCss as getComponentCss$16 } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
+import { getButtonGroupCss as getComponentCss$17 } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
 
 /**
  * @slot {"name": "", "description": "Default slot for the buttons to group." }
@@ -12,7 +12,7 @@ class DSRButtonGroup extends Component {
     host;
     render() {
         splitChildren(this.props.children);
-        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$16(this.props.direction)));
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$17(this.props.direction)));
         return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx("div", { role: "group", children: jsx("slot", {}) })] }), this.props.children] }));
     }
 }

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

@@ -7,6 +7,7 @@ import '../components/button-pure.wrapper.mjs';
 import '../components/button-tile.wrapper.mjs';
 import '../components/canvas.wrapper.mjs';
 import '../components/carousel.wrapper.mjs';
+import '../components/checkbox.wrapper.mjs';
 import '../components/checkbox-wrapper.wrapper.mjs';
 import '../components/content-wrapper.wrapper.mjs';
 import '../components/crest.wrapper.mjs';
@@ -75,7 +76,7 @@ import { splitChildren } from '../../splitChildren.mjs';
 import { Component } from 'react';
 import { minifyCss } from '../../minifyCss.mjs';
 import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.mjs';
-import { getButtonPureCss as getComponentCss$15 } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
+import { getButtonPureCss as getComponentCss$16 } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
 import { isDisabledOrLoading, hasVisibleIcon, getButtonPureAriaAttributes } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
 import { loadingId, LoadingMessage } from './loading-message.mjs';
 
@@ -96,7 +97,7 @@ class DSRButtonPure extends Component {
             size: 'inherit',
             theme: this.props.theme,
         };
-        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$15(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.underline, this.props.theme)));
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$16(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.underline, this.props.theme)));
         return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(Fragment, { children: [jsxs("button", { ...getButtonPureAriaAttributes(this.props.disabled, this.props.loading, this.props.aria), className: "root", type: this.props.type, name: this.props.name, value: this.props.value, "aria-describedby": this.props.loading ? loadingId : undefined, children: [this.props.loading ? (jsx(PSpinner, { ...iconProps, "aria-hidden": "true" })) : (hasIcon && (jsx(PIcon, { ...iconProps, name: this.props.icon, source: this.props.iconSource, color: this.isDisabledOrLoading ? 'state-disabled' : 'primary', theme: this.props.theme, "aria-hidden": "true" }))), jsx("span", { className: "label", children: jsx("slot", {}) })] }), jsx(LoadingMessage, { loading: this.props.loading, initialLoading: false })] })] }), this.props.children] }));
     }
 }