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

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

@@ -116,13 +116,13 @@ class DSRCarousel extends react.Component {
             // 'aria-controls': 'splide-track', // TODO: cross shadow dom? use native button tag instead of p-button-pure?
         };
         const headingId = 'heading';
-        const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getCarouselCss(hasHeadingPropOrSlot, hasDescriptionPropOrSlot, hasControlsSlot, this.props.headingSize, this.props.width, 
+        const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getCarouselCss(this.props.gradientColor, hasHeadingPropOrSlot, hasDescriptionPropOrSlot, hasControlsSlot, this.props.headingSize, this.props.width, 
         // flip boolean values of disablePagination since it is the inverse of pagination
         this.props.disablePagination
             ? typeof this.props.disablePagination === 'object'
                 ? Object.fromEntries(Object.entries(this.props.disablePagination).map(([key, value]) => [key, !value]))
                 : !this.props.disablePagination
-            : this.props.pagination, utilsEntry.isInfinitePagination(this.props.amountOfPages), (alignHeaderDeprecationMap[this.props.alignHeader] ||
+            : this.props.pagination, utilsEntry.isInfinitePagination(this.props.focusOnCenterSlide ? this.slides.length : this.props.amountOfPages), (alignHeaderDeprecationMap[this.props.alignHeader] ||
             this.props.alignHeader), this.props.theme, (this.props.slidesPerPage === 'auto' || typeof this.props.slidesPerPage === 'object' || this.props.slidesPerPage < otherChildren.length))));
         return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: "header", children: [hasHeadingPropOrSlot &&
                                             (this.props.heading ? (jsxRuntime.jsx("h2", { className: "heading", id: headingId, children: this.props.heading })) : (jsxRuntime.jsx("div", { className: "heading", id: headingId, children: jsxRuntime.jsx("slot", { name: "heading" }) }))), hasDescriptionPropOrSlot && (this.props.description ? jsxRuntime.jsx("p", { children: this.props.description }) : jsxRuntime.jsx("slot", { name: "description" })), hasControlsSlot && jsxRuntime.jsx("slot", { name: "controls" }), jsxRuntime.jsxs("div", { className: "nav", children: [this.props.skipLinkTarget && (jsxRuntime.jsx(linkPure_wrapper.PLinkPure, { href: this.props.skipLinkTarget, theme: this.props.theme, icon: "arrow-last", className: "btn skip-link", alignLabel: "start", hideLabel: true, children: "Skip carousel entries" })), (this.props.slidesPerPage === 'auto' || typeof this.props.slidesPerPage === 'object' || this.props.slidesPerPage < otherChildren.length) && (jsxRuntime.jsx(buttonPure_wrapper.PButtonPure, { ...btnProps, icon: "arrow-left" })), (this.props.slidesPerPage === 'auto' || typeof this.props.slidesPerPage === 'object' || this.props.slidesPerPage < otherChildren.length) && (jsxRuntime.jsx(buttonPure_wrapper.PButtonPure, { ...btnProps, icon: "arrow-right" }))] })] }), jsxRuntime.jsx("div", { id: "splide", className: "splide", ...utilsEntry.parseAndGetAriaAttributes({
@@ -130,6 +130,7 @@ class DSRCarousel extends react.Component {
                                         ...utilsEntry.parseAndGetAriaAttributes(this.props.aria),
                                     }), children: jsxRuntime.jsx("div", { className: "splide__track", children: jsxRuntime.jsx("div", { className: "splide__list", children: otherChildren.map((_, i) => (jsxRuntime.jsx("div", { className: "splide__slide", children: jsxRuntime.jsx("slot", { name: `slide-${i}` }) }, i))) }) }) }), (this.props.disablePagination ? this.props.disablePagination !== true : this.props.pagination) && (this.props.slidesPerPage === 'auto' || typeof this.props.slidesPerPage === 'object' || this.props.slidesPerPage < otherChildren.length) && (jsxRuntime.jsx("div", { className: "pagination-container", "aria-hidden": "true", children: jsxRuntime.jsx("div", { className: "pagination" }) }))] })] }), this.props.children] }));
     }
+    getPageCount = () => (this.props.focusOnCenterSlide ? this.slides.length : this.props.amountOfPages);
 }
 
 exports.DSRCarousel = DSRCarousel;

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

@@ -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$12 = (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,15 +4880,30 @@ 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',
+            },
         },
     });
 };
 
 const cssVariablePrevNextFilter = '--p-carousel-prev-next-filter';
+const cssVariableGradientColorWidth = '--p-gradient-color-width';
 const carouselTransitionDuration = motionDurationModerate;
 const paginationInfiniteStartCaseClass = 'pagination--infinite';
 const bulletClass = 'bullet';
@@ -4825,11 +4931,42 @@ const backfaceVisibilityJssStyle = {
     backfaceVisibility: 'hidden',
     WebkitBackfaceVisibility: 'hidden',
 };
-const getComponentCss$11 = (hasHeading, hasDescription, hasControlsSlot, headingSize, width, hasPagination, isInfinitePagination, alignHeader, theme, hasNavigation) => {
+const gradientColorLight$1 = {
+    'background-base': '255,255,255',
+    'background-surface': '238,239,242',
+    none: '',
+};
+const gradientColorDark$1 = {
+    'background-base': '14,14,18',
+    'background-surface': '33,34,37',
+    none: '',
+};
+const gradientColorMap$1 = {
+    auto: gradientColorLight$1,
+    light: gradientColorLight$1,
+    dark: gradientColorDark$1,
+};
+const getGradient$1 = (theme, gradientColorTheme) => {
+    const gradientColor = gradientColorMap$1[theme][gradientColorTheme];
+    return (`rgba(${gradientColor},1) 20%,` +
+        `rgba(${gradientColor},0.6) 48%,` +
+        `rgba(${gradientColor},0.3) 68%,` +
+        `rgba(${gradientColor},0)`);
+};
+const getComponentCss$11 = (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();
     const isHeaderAlignCenter = alignHeader === 'center';
+    const getGradientStyles = (direction) => gradientColor
+        ? {
+            [direction === 'left' ? 'right' : 'left']: 0,
+            background: `linear-gradient(to ${direction}, ${getGradient$1(theme, gradientColor)} 100%)`,
+            ...prefersColorSchemeDarkMediaQuery(theme, {
+                background: `linear-gradient(to ${direction}, ${getGradient$1('dark', gradientColor)} 100%)`,
+            }),
+        }
+        : {};
     return getCss({
         '@global': {
             ':host': {
@@ -4936,6 +5073,7 @@ const getComponentCss$11 = (hasHeading, hasDescription, hasControlsSlot, heading
             padding: '4px 0', // for slide focus outline
             margin: '-4px 0', // for slide focus outline
             '&__track': {
+                position: 'relative',
                 // !important is necessary to override inline styles set by splide library
                 ...addImportantToEachRule({
                     padding: `0 ${spacingMap[width].base}`,
@@ -4955,6 +5093,16 @@ const getComponentCss$11 = (hasHeading, hasDescription, hasControlsSlot, heading
                     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'),
             },
             '&__list': {
                 ...backfaceVisibilityJssStyle,
@@ -8063,10 +8211,13 @@ const getComponentCss$x = (hideLabel, state, isDisabled, isLoading, isWithinForm
         // TODO: move into getSlottedTextFieldTextareaSelectStyles() via parameter, e.g. textAlign=center|start
         textAlign: 'center',
         // TODO: move into getSlottedTextFieldTextareaSelectStyles() via parameter, e.g. size=max|min
-        width: inputSize,
+        maxWidth: inputSize,
+        // min width is needed for showing at least 1 character in very narrow containers. The "1rem" value is the minimum safe zone to show at least.
+        minWidth: `calc(1rem + ${borderWidthBase}*2 + ${spacingStaticSmall}*2)`,
         ...(length > 4 && {
             [getMediaQueryMax('xs')]: {
                 // TODO: instead of having dedicated css rules depending on length we should try to implement a fluid one fits all solution
+                maxWidth: 'auto',
                 width: `calc((276px - (${spacingStaticSmall} * ${length - 1})) / ${length})`, // calculate the max with of the inputs that fit into grid in viewport base (276px)
             },
         }),
@@ -8116,7 +8267,7 @@ const getComponentCss$x = (hideLabel, state, isDisabled, isLoading, isWithinForm
         },
         wrapper: {
             display: 'grid',
-            gridTemplateColumns: `repeat(${length}, minmax(0, 1fr))`,
+            gridTemplateColumns: `repeat(${length}, minmax(auto, 1fr))`,
             justifySelf: 'flex-start',
             gap: spacingStaticSmall,
         },
@@ -9035,6 +9186,12 @@ const getComponentCss$q = (isDisabled, hasCustomDropdown, hideLabel, state, them
 
 const INTERNAL_SELECT_SLOT = 'internal-select';
 
+const cssVarBackgroundColor = '--p-select-background-color';
+const cssVarTextColor = '--p-select-text-color';
+const cssVarBorderColor = '--p-select-border-color';
+const cssVarIconFilter = '--p-select-icon-filter';
+const cssVarBackgroundColorFocus = '--p-select-focus-background-color';
+const cssVarBorderColorFocus = '--p-select-focus-border-color';
 const getComponentCss$p = (direction, isOpen, isDisabled, hideLabel, state, isWithinForm, isNativePopoverCase, theme) => {
     return getCss({
         '@global': {
@@ -9079,6 +9236,9 @@ const getComponentCss$p = (direction, isOpen, isDisabled, hideLabel, state, isWi
             pointerEvents: 'none',
             transform: 'rotate3d(0,0,1,0.0001deg)', // needs to be a little more than 0 for correct direction in safari
             transition: getTransition('transform'),
+            ...(!isHighContrastMode && {
+                filter: `var(${cssVarIconFilter})`,
+            }),
             '&--rotate': {
                 transform: 'rotate3d(0,0,1,180deg)',
             },
@@ -9127,30 +9287,38 @@ const getButtonStyles = (isDisabled, direction, isOpen, state, theme) => {
             cursor: 'not-allowed',
         },
         transition: `${getTransition('background-color')}, ${getTransition('border-color')}, ${getTransition('color')}`, // for smooth transitions between e.g. disabled states
-        color: primaryColor,
-        '&:not(:focus)': {
-            ...getPlaceholderJssStyle({ color: primaryColor, opacity: 1 }),
-            ...prefersColorSchemeDarkMediaQuery(theme, getPlaceholderJssStyle({ color: primaryColorDark, opacity: 1 })),
+        color: `var(${cssVarTextColor}, ${primaryColor})`,
+        background: `var(${cssVarBackgroundColor}, ${backgroundColor})`,
+        border: `${borderWidthBase} solid var(${cssVarBorderColor}, ${isOpen ? primaryColor : formStateColor || contrastMediumColor})`,
+        borderRadius: borderRadiusSmall,
+        '&:not(:focus-visible)': {
+            ...getPlaceholderJssStyle({
+                color: `var(${cssVarTextColor}, ${primaryColor})`,
+                opacity: 1,
+            }),
+            ...prefersColorSchemeDarkMediaQuery(theme, getPlaceholderJssStyle({
+                color: `var(${cssVarTextColor}, ${primaryColorDark})`,
+                opacity: 1,
+            })),
         }, // Opacity fixes placeholder being shown lighter in firefox
         ...hoverMediaQuery({
-            '&:hover:not(:disabled):not(:focus),label:hover~.wrapper &:not(:disabled):not(:focus)': {
-                borderColor: isOpen ? primaryColor : formStateHoverColor || primaryColor,
+            '&:hover:not(:disabled):not(:focus-visible),label:hover~.wrapper &:not(:disabled):not(:focus-visible)': {
+                borderColor: `var(${cssVarBorderColor}, ${isOpen ? primaryColor : formStateHoverColor || primaryColor})`,
                 ...prefersColorSchemeDarkMediaQuery(theme, {
-                    borderColor: isOpen ? primaryColorDark : formStateHoverColorDark || primaryColorDark,
+                    borderColor: `var(${cssVarBorderColor}, ${isOpen ? primaryColorDark : formStateHoverColorDark || primaryColorDark})`,
                 }),
             },
         }),
         ...(!isDisabled && {
-            '&:focus': {
-                borderColor: primaryColor,
+            '&:focus-visible': {
+                borderColor: `var(${cssVarBorderColorFocus}, ${primaryColor})`,
+                background: `var(${cssVarBackgroundColorFocus}, ${backgroundColor})`,
                 ...prefersColorSchemeDarkMediaQuery(theme, {
-                    borderColor: primaryColorDark,
+                    borderColor: `var(${cssVarBorderColorFocus}, ${primaryColorDark})`,
+                    background: `var(${cssVarBackgroundColorFocus}, ${backgroundColorDark})`,
                 }),
             },
         }),
-        background: backgroundColor,
-        border: `${borderWidthBase} solid ${isOpen ? primaryColor : formStateColor || contrastMediumColor}`,
-        borderRadius: borderRadiusSmall,
         ...(isOpen && {
             ['paddingBottom' ]: `calc(${formElementPaddingVertical} + 1px)`, // Add padding to keep same height when border changes
             ['borderBottom' ]: addImportantToRule(`1px solid ${contrastMediumColor}`),
@@ -9158,16 +9326,18 @@ const getButtonStyles = (isDisabled, direction, isOpen, state, theme) => {
             ['borderBottomRightRadius' ]: 0,
         }),
         ...(isDisabled && {
-            ...getPlaceholderJssStyle({ color: disabledColor }),
+            ...getPlaceholderJssStyle({
+                color: disabledColor,
+            }),
             cursor: 'not-allowed',
             color: disabledColor,
             borderColor: disabledColor,
             WebkitTextFillColor: disabledColor,
         }),
         ...prefersColorSchemeDarkMediaQuery(theme, {
-            color: primaryColorDark,
-            background: backgroundColorDark,
-            border: `${borderWidthBase} solid ${isOpen ? primaryColorDark : formStateColorDark || contrastMediumColorDark}`,
+            color: `var(${cssVarTextColor}, ${primaryColorDark})`,
+            background: `var(${cssVarBackgroundColor}, ${backgroundColorDark})`,
+            border: `${borderWidthBase} solid var(${cssVarBorderColor}, ${isOpen ? primaryColorDark : formStateColorDark || contrastMediumColorDark})`,
             ...(isOpen && {
                 ['borderBottom' ]: addImportantToRule(`1px solid ${contrastMediumColorDark}`),
             }),
@@ -9203,7 +9373,7 @@ const getListStyles = (isOpen, direction, theme) => {
         overflowY: 'auto',
         WebkitOverflowScrolling: 'touch',
         background: backgroundColor,
-        border: `2px solid ${primaryColor}`,
+        border: `2px solid var(${cssVarBorderColor}, ${primaryColor})`,
         ['borderTop' ]: 'none',
         borderRadius: borderRadiusSmall,
         ['borderTopLeftRadius' ]: 0,
@@ -9214,7 +9384,7 @@ const getListStyles = (isOpen, direction, theme) => {
         transform: 'translate3d(0,0,0)', // fix iOS bug if less than 5 items are displayed
         ...prefersColorSchemeDarkMediaQuery(theme, {
             background: backgroundColorDark,
-            borderColor: primaryColorDark,
+            borderColor: `var(${cssVarBorderColor}, ${primaryColorDark})`,
         }),
     };
 };
@@ -10166,7 +10336,7 @@ const showCustomCalendarOrTimeIndicator = (isCalendar, isTime) => {
 
 const cssVariableInputPaddingStart = '--p-internal-text-field-input-padding-start';
 const cssVariableInputPaddingEnd = '--p-internal-text-field-input-padding-end';
-const getComponentCss$8 = (isDisabled, hideLabel, state, hasUnitOrVisibleCounter, unitPosition, inputType, showPasswordToggle, isWithinForm, hasSubmitButton, theme) => {
+const getComponentCss$8 = (isDisabled, hideLabel, state, hasUnitOrVisibleCounter, unitPosition, inputType, showPasswordToggle, isWithinForm, hasSubmitButton, theme, unitLength) => {
     const isSearch = isType(inputType, 'search');
     const isPassword = isType(inputType, 'password');
     const isNumber = isType(inputType, 'number');
@@ -10176,6 +10346,9 @@ const getComponentCss$8 = (isDisabled, hideLabel, state, hasUnitOrVisibleCounter
     const isSearchWithoutFormOrSubmitButton = isSearch && (!isWithinForm || !hasSubmitButton);
     const isSearchWithForm = isSearch && isWithinForm;
     const isCalendarOrTimeWithCustomIndicator = showCustomCalendarOrTimeIndicator(isCalendar, isTime);
+    const counterCharacterLengthCssVar = 'var(--p-internal-counter-character-length)';
+    const paddingInlineIfUnitOrCounter = hasUnitOrVisibleCounter &&
+        `calc(${formElementLayeredGap} + ${formElementPaddingHorizontal} + ${borderWidthBase} + ${counterCharacterLengthCssVar} * 1ch * log(2.6))`;
     return getCss({
         '@global': {
             ':host': {
@@ -10191,8 +10364,12 @@ const getComponentCss$8 = (isDisabled, hideLabel, state, hasUnitOrVisibleCounter
                 ...getSlottedTextFieldTextareaSelectStyles('input', state, false, theme, {
                     gridArea: '1/1/1/-1',
                     padding: `${formElementPaddingVertical} ${formElementPaddingHorizontal}`,
-                    paddingInlineStart: `var(${cssVariableInputPaddingStart})`, // iOS Safari 14.5 can't handle padding-inline shorthand with css variables
-                    paddingInlineEnd: `var(${cssVariableInputPaddingEnd})`, // iOS Safari 14.5 can't handle padding-inline shorthand with css variables
+                    paddingInlineStart: hasUnitOrVisibleCounter && unitPosition === 'prefix'
+                        ? paddingInlineIfUnitOrCounter
+                        : `var(${cssVariableInputPaddingStart})`, // iOS Safari 14.5 can't handle padding-inline shorthand with css variables
+                    paddingInlineEnd: hasUnitOrVisibleCounter && unitPosition === 'suffix'
+                        ? paddingInlineIfUnitOrCounter
+                        : `var(${cssVariableInputPaddingEnd})`, // iOS Safari 14.5 can't handle padding-inline shorthand with css variables
                     // TODO: move into getSlottedTextFieldTextareaSelectStyles()
                     ...(isNumber && {
                         MozAppearance: 'textfield', // hides up/down spin button for Firefox
@@ -10417,6 +10594,8 @@ const getComponentCss$4 = (isDisabled, hideLabel, state, hasCounter, theme) => {
         root: {
             display: 'grid',
             gap: spacingStaticXSmall,
+            // min width is needed for showing at least 1 character in very narrow containers. The "1rem" value is the minimum safe zone to show at least 1 character.
+            minWidth: `calc(1rem + ${formElementPaddingHorizontal}*2 + ${borderWidthBase}*2)`,
         },
         wrapper: {
             display: 'grid',
@@ -10468,6 +10647,8 @@ const getComponentCss$3 = (isDisabled, hideLabel, state, hasCounter, resize, the
                 background: 'transparent',
                 textIndent: 0,
                 color: primaryColor,
+                // min width is needed for showing at least 1 character in very narrow containers. The "1rem" value is the minimum safe zone to show at least 1 character.
+                minWidth: `calc(1rem + ${formElementPaddingHorizontal}*2 + ${borderWidthBase}*2)`,
                 transition: `${getTransition('background-color')}, ${getTransition('border-color')}, ${getTransition('color')}`, // for smooth transitions between e.g. disabled states
                 ...prefersColorSchemeDarkMediaQuery(theme, {
                     borderColor: formStateColorDark || contrastMediumColorDark,

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,

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, 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, 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, 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(), width, wrapContent];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['activeSlideIndex', 'alignHeader', 'aria', 'description', 'disablePagination', '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', '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, 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(), width, wrapContent, children })),
             }
             : {
                 children,