@porsche-design-system/components-react 3.19.0-rc.0 → 3.19.0-rc.2

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');
@@ -4706,16 +4706,14 @@ const getComponentCss$13 = (icon, iconSource, variant, hideLabel, disabled, load
     }));
 };
 
-const cssVariableSidebarStartWidth = '--p-canvas-sidebar-start-width';
-const cssVariableSidebarEndWidth = '--p-canvas-sidebar-end-width';
-// TODO: maybe default grid gap would also work
+const cssVarSidebarStartWidth = '--p-canvas-sidebar-start-width';
+const cssVarSidebarEndWidth = '--p-canvas-sidebar-end-width';
 const gridProductiveGap = gridGap.replace('36px', '24px');
 const mediaQueryDesktopView = getMediaQueryMin('m');
-const sidebarWidths = {
-    medium: '320px',
-    large: '480px', // TODO: won't work at viewport 1000px when both sidebars are opened
-};
-const getComponentCss$12 = (isSidebarStartOpen, sidebarStartWidth, isSidebarEndOpen, sidebarEndWidth) => {
+const sidebarWidth = '320px';
+const headerHeight = 'calc(1.5rem + 28px)';
+const getComponentCss$13 = (theme, isSidebarStartOpen, isSidebarEndOpen) => {
+    const { primaryColor, backgroundColor, backgroundSurfaceColor } = getThemedColors(theme);
     return getCss({
         '@global': {
             ':host': {
@@ -4726,7 +4724,71 @@ const getComponentCss$12 = (isSidebarStartOpen, sidebarStartWidth, isSidebarEndO
                 }),
             },
             ...preventFoucOfNestedElementsStyles,
-            ':is(header, main, footer, aside)': {
+            '::slotted': {
+                '&([slot*="header"])': {
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: spacingStaticSmall,
+                },
+                '&([slot*="sidebar"])': {
+                    display: 'flex',
+                    flexDirection: 'column',
+                    gap: spacingStaticSmall,
+                },
+                // pre-defined utility classes
+                '&(.p-module)': {
+                    gridColumn: '1/-1',
+                },
+                '&(.p-module--subgrid)': {
+                    display: 'grid',
+                    gridTemplateColumns: 'subgrid',
+                    rowGap: gridProductiveGap,
+                },
+                '&(.p-module--more-space-above-small)': {
+                    marginTop: spacingStaticSmall,
+                },
+                '&(.p-module--more-space-above-medium)': {
+                    marginTop: spacingStaticMedium,
+                },
+                '&(.p-module--more-space-above-large)': {
+                    marginTop: spacingStaticLarge,
+                },
+                '&(.p-module--less-space-above-small)': {
+                    marginTop: `max(calc(-1 * ${gridProductiveGap}), calc(-1 * ${spacingStaticSmall}))`,
+                },
+                '&(.p-module--less-space-above-medium)': {
+                    marginTop: `max(calc(-1 * ${gridProductiveGap}), calc(-1 * ${spacingStaticMedium}))`,
+                },
+                '&(.p-module--less-space-above-large)': {
+                    marginTop: `max(calc(-1 * ${gridProductiveGap}), calc(-1 * ${spacingStaticLarge}))`,
+                },
+                '&(.p-flex)': {
+                    display: 'flex',
+                },
+                '&(.p-align-items--center)': {
+                    alignItems: 'center',
+                },
+                '&(.p-gap--small)': {
+                    gap: spacingStaticSmall,
+                },
+                '&(.p-gap--medium)': {
+                    gap: spacingStaticMedium,
+                },
+                '&(.p-gap--large)': {
+                    gap: spacingStaticLarge,
+                },
+            },
+            'slot[name="title"]::slotted(a)': {
+                textDecoration: 'none',
+                color: 'inherit',
+            },
+            h2: {
+                ...textSmallStyle,
+                color: primaryColor,
+                textTransform: 'uppercase',
+                letterSpacing: '2px',
+            },
+            'header, main, footer, aside': {
                 padding: gridProductiveGap,
                 boxSizing: 'border-box',
                 zIndex: 0,
@@ -4735,49 +4797,78 @@ const getComponentCss$12 = (isSidebarStartOpen, sidebarStartWidth, isSidebarEndO
                 gridArea: 'header',
                 position: 'sticky',
                 top: 0,
-                zIndex: 1,
+                zIndex: 9999999,
+                height: headerHeight,
+                display: 'grid',
+                gridTemplateColumns: 'minmax(0, 1fr) auto minmax(0, 1fr)',
+                gap: gridProductiveGap,
+                backgroundColor: backgroundSurfaceColor,
+                alignItems: 'center',
+                paddingBlock: 0,
+                '&::before, &::after': {
+                    content: '""',
+                    position: 'absolute',
+                    backgroundColor: 'transparent',
+                    bottom: `calc(${borderRadiusLarge} * -2)`,
+                    height: `calc(${borderRadiusLarge} * 2)`,
+                    width: borderRadiusLarge,
+                    boxShadow: `0 -${borderRadiusLarge} 0 0 ${backgroundSurfaceColor}`,
+                    pointerEvents: 'none',
+                },
+                '&::before': {
+                    left: 0,
+                    borderTopLeftRadius: borderRadiusLarge,
+                },
+                '&::after': {
+                    right: 0,
+                    borderTopRightRadius: borderRadiusLarge,
+                },
             },
             main: {
                 gridArea: 'main',
-                '--pds-grid-span-full': 'span 6',
-                '--pds-grid-span-one-half': 'span 3',
-                '--pds-grid-span-one-third': 'span 2',
-                '--pds-grid-span-two-thirds': 'span 4',
+                '--p-canvas-grid-span-full': 'span 6',
+                '--p-canvas-grid-span-one-half': 'span 3',
+                '--p-canvas-grid-span-one-third': 'span 2',
+                '--p-canvas-grid-span-two-thirds': 'span 4',
                 display: 'grid',
                 gridTemplateColumns: 'repeat(6, minmax(0, 1fr))',
                 gap: gridProductiveGap,
                 alignContent: 'flex-start',
+                backgroundColor,
                 [mediaQueryDesktopView]: {
-                    '--pds-grid-span-full': 'span 12',
-                    '--pds-grid-span-one-half': 'span 6',
-                    '--pds-grid-span-one-third': 'span 4',
-                    '--pds-grid-span-two-thirds': 'span 8',
+                    '--p-canvas-grid-span-full': 'span 12',
+                    '--p-canvas-grid-span-one-half': 'span 6',
+                    '--p-canvas-grid-span-one-third': 'span 4',
+                    '--p-canvas-grid-span-two-thirds': 'span 8',
                     gridTemplateColumns: 'repeat(12, minmax(0, 1fr))',
                 },
             },
             footer: {
                 gridArea: 'footer',
+                backgroundColor,
             },
             aside: {
-                // TODO: box-shadows or colored surface must be defined, design is missing
-                position: 'relative',
                 transition: getTransition('margin'),
-                '&:first-of-type': {
-                    gridArea: 'sidebar-start',
-                    width: `var(${cssVariableSidebarStartWidth}, ${sidebarWidths[sidebarStartWidth]})`,
-                    marginInlineStart: isSidebarStartOpen
-                        ? 0
-                        : `calc(var(${cssVariableSidebarStartWidth}, ${sidebarWidths[sidebarStartWidth]}) * -1)`,
-                },
-                '&:last-of-type': {
-                    gridArea: 'sidebar-end',
-                    width: `var(${cssVariableSidebarEndWidth}, ${sidebarWidths[sidebarEndWidth]})`,
-                    marginInlineEnd: isSidebarEndOpen
-                        ? 0
-                        : `calc(var(${cssVariableSidebarEndWidth}, ${sidebarWidths[sidebarEndWidth]}) * -1)`,
-                },
+                position: 'sticky',
+                top: headerHeight,
+                height: `calc(100dvh - ${headerHeight})`,
+                overflow: 'hidden auto',
             },
         },
+        'sidebar-start': {
+            borderInlineEnd: `1px solid ${backgroundSurfaceColor}`,
+            backgroundColor,
+            gridArea: 'sidebar-start',
+            width: `var(${cssVarSidebarStartWidth}, ${sidebarWidth})`,
+            marginInlineStart: isSidebarStartOpen ? 0 : `calc(var(${cssVarSidebarStartWidth}, ${sidebarWidth}) * -1)`,
+        },
+        'sidebar-end': {
+            borderInlineStart: `1px solid ${backgroundSurfaceColor}`,
+            backgroundColor,
+            gridArea: 'sidebar-end',
+            width: `var(${cssVarSidebarEndWidth}, ${sidebarWidth})`,
+            marginInlineEnd: isSidebarEndOpen ? 0 : `calc(var(${cssVarSidebarEndWidth}, ${sidebarWidth}) * -1)`,
+        },
         canvas: {
             display: 'grid',
             gridTemplateRows: 'auto minmax(0, 1fr) auto',
@@ -4789,10 +4880,24 @@ const getComponentCss$12 = (isSidebarStartOpen, sidebarStartWidth, isSidebarEndO
                 gridTemplateAreas: '"header header header" "sidebar-start main sidebar-end" "sidebar-start footer sidebar-end"',
             },
         },
-        close: {
-            // TODO: must be positioned properly, design is missing
-            position: 'absolute',
-            inset: `${spacingStaticXSmall} ${spacingStaticXSmall} auto auto`,
+        crest: {
+            [getMediaQueryMin('s')]: {
+                display: 'none',
+            },
+        },
+        wordmark: {
+            height: '10px',
+            [getMediaQueryMax('s')]: {
+                display: 'none',
+            },
+        },
+        header: {
+            display: 'flex',
+            gap: spacingStaticSmall,
+            alignItems: 'center',
+            '&:last-of-type': {
+                justifyContent: 'end',
+            },
         },
     });
 };
@@ -4848,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();
@@ -5294,26 +5399,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': {
@@ -5334,16 +5430,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'),
+                                })),
                         },
                     }),
                 },
@@ -5391,6 +5501,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,
@@ -8395,12 +8715,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': {
@@ -8425,6 +8741,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'),
+                                })),
                         },
                     }),
                 },
@@ -10723,4 +11046,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/canvas.wrapper.mjs

@@ -1,26 +1,24 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
-import { useEventCallback, usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 import { DSRCanvas } from '../dsr-components/canvas.mjs';
 
-const PCanvas = forwardRef(({ onDismissSidebarEnd, onDismissSidebarStart, sidebarEndOpen = false, sidebarEndWidth = 'medium', sidebarStartOpen = false, sidebarStartWidth = 'medium', className, children, ...rest }, ref) => {
+const PCanvas = forwardRef(({ sidebarEndIcon = 'configurate', sidebarEndOpen = false, sidebarStartIcon = 'menu-lines', sidebarStartOpen = false, theme, className, children, ...rest }, ref) => {
     const elementRef = useRef();
-    useEventCallback(elementRef, 'dismissSidebarEnd', onDismissSidebarEnd);
-    useEventCallback(elementRef, 'dismissSidebarStart', onDismissSidebarStart);
     const WebComponentTag = usePrefix('p-canvas');
-    const propsToSync = [sidebarEndOpen, sidebarEndWidth, sidebarStartOpen, sidebarStartWidth];
+    const propsToSync = [sidebarEndIcon, sidebarEndOpen, sidebarStartIcon, sidebarStartOpen, theme || useTheme()];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['sidebarEndOpen', 'sidebarEndWidth', 'sidebarStartOpen', 'sidebarStartWidth'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['sidebarEndIcon', 'sidebarEndOpen', 'sidebarStartIcon', 'sidebarStartOpen', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsx(DSRCanvas, { sidebarEndOpen, sidebarEndWidth, sidebarStartOpen, sidebarStartWidth, children })),
+                children: (jsx(DSRCanvas, { sidebarEndIcon, sidebarEndOpen, sidebarStartIcon, sidebarStartOpen, theme: theme || useTheme(), children })),
             }
             : {
                 children,