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

package/CHANGELOG.md

@@ -14,6 +14,23 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0),
 
 ### [Unreleased]
 
+### [3.19.0-rc.0] - 2024-09-03
+
+#### Added
+
+- `componentsReady()`: Introduce optional `readyState` parameter
+  ([#3460](https://github.com/porsche-design-system/porsche-design-system/pull/3460))
+
+#### Changed
+
+- `Text Field Wrapper`: width calculation of counter and unit element are now CSS based in relation to the number of
+  characters ([#3472](https://github.com/porsche-design-system/porsche-design-system/pull/3472))
+
+#### Fixed
+
+- `jsdom-polyfill`: errors from included polyfill packages
+  ([3481](https://github.com/porsche-design-system/porsche-design-system/pull/3481))
+
 ### [3.18.0] - 2024-08-21
 
 ### [3.18.0-rc.0] - 2024-08-21

package/cjs/lib/components/carousel.wrapper.cjs

@@ -6,15 +6,15 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PCarousel = react.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, ...rest }, ref) => {
+const PCarousel = react.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, ...rest }, ref) => {
     const elementRef = react.useRef();
     hooks.useEventCallback(elementRef, 'carouselChange', onCarouselChange);
     hooks.useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = hooks.usePrefix('p-carousel');
-    const propsToSync = [activeSlideIndex, alignHeader, aria, description, disablePagination, heading, headingSize, intl, pagination, rewind, skipLinkTarget, slidesPerPage, theme || hooks.useTheme(), width, wrapContent];
+    const propsToSync = [activeSlideIndex, alignHeader, aria, description, disablePagination, focusOnCenterSlide, gradientColor, heading, headingSize, intl, pagination, rewind, skipLinkTarget, slidesPerPage, theme || hooks.useTheme(), width, wrapContent];
     hooks.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,

package/esm/lib/components/carousel.wrapper.d.ts

@@ -1,5 +1,5 @@
 import type { BaseProps } from '../../BaseProps';
-import type { CarouselAlignHeader, SelectedAriaAttributes, CarouselAriaAttribute, BreakpointCustomizable, CarouselHeadingSize, CarouselInternationalization, CarouselUpdateEventDetail, Theme, CarouselWidth } from '../types';
+import type { CarouselAlignHeader, SelectedAriaAttributes, CarouselAriaAttribute, BreakpointCustomizable, CarouselGradientColor, CarouselHeadingSize, CarouselInternationalization, CarouselUpdateEventDetail, Theme, CarouselWidth } from '../types';
 export type PCarouselProps = BaseProps & {
     /**
      * Defines which slide to be active (zero-based numbering).
@@ -21,6 +21,14 @@ export type PCarouselProps = BaseProps & {
      * @deprecated since v3.0.0, will be removed with next major release, use `pagination` instead. If true, the carousel will not show pagination bullets at the bottom.
      */
     disablePagination?: BreakpointCustomizable<boolean>;
+    /**
+     * Indicates whether focus should be set on the center slide. If true, the carousel loops by individual slide; otherwise, it loops by page.
+     */
+    focusOnCenterSlide?: boolean;
+    /**
+     * Adapts the background gradient for the left and right edge.
+     */
+    gradientColor?: CarouselGradientColor;
     /**
      * Defines the heading used in the carousel.
      */
@@ -92,6 +100,14 @@ export declare const PCarousel: import("react").ForwardRefExoticComponent<import
      * @deprecated since v3.0.0, will be removed with next major release, use `pagination` instead. If true, the carousel will not show pagination bullets at the bottom.
      */
     disablePagination?: BreakpointCustomizable<boolean>;
+    /**
+     * Indicates whether focus should be set on the center slide. If true, the carousel loops by individual slide; otherwise, it loops by page.
+     */
+    focusOnCenterSlide?: boolean;
+    /**
+     * Adapts the background gradient for the left and right edge.
+     */
+    gradientColor?: CarouselGradientColor;
     /**
      * Defines the heading used in the carousel.
      */

package/esm/lib/components/carousel.wrapper.mjs

@@ -4,15 +4,15 @@ import { forwardRef, useRef } from 'react';
 import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.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, ...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, ...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,

package/esm/lib/types.d.ts

@@ -696,6 +696,12 @@ declare const CAROUSEL_WIDTHS: readonly [
     "extended"
 ];
 export type CarouselWidth = (typeof CAROUSEL_WIDTHS)[number];
+declare const CAROUSEL_GRADIENT_COLORS: readonly [
+    "background-base",
+    "background-surface",
+    "none"
+];
+export type CarouselGradientColor = (typeof CAROUSEL_GRADIENT_COLORS)[number];
 declare const CAROUSEL_ALIGN_HEADERS: readonly [
     "start",
     "center",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@porsche-design-system/components-react",
-  "version": "3.18.0",
+  "version": "3.19.0-rc.0",
   "description": "Porsche Design System is a component library designed to help developers create the best experience for software or services distributed by Dr. Ing. h.c. F. Porsche AG.",
   "keywords": [
     "porsche",
@@ -17,7 +17,7 @@
   "license": "SEE LICENSE IN LICENSE",
   "homepage": "https://designsystem.porsche.com",
   "dependencies": {
-    "@porsche-design-system/components-js": "3.18.0"
+    "@porsche-design-system/components-js": "3.19.0-rc.0"
   },
   "peerDependencies": {
     "react": ">=18.0.0 <19.0.0",

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

@@ -4800,6 +4800,7 @@ const getComponentCss$12 = (isSidebarStartOpen, sidebarStartWidth, isSidebarEndO
 };
 
 const cssVariablePrevNextFilter = '--p-carousel-prev-next-filter';
+const cssVariableGradientColorWidth = '--p-gradient-color-width';
 const carouselTransitionDuration = motionDurationModerate;
 const paginationInfiniteStartCaseClass = 'pagination--infinite';
 const bulletClass = 'bullet';
@@ -4827,11 +4828,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': {
@@ -4938,6 +4970,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}`,
@@ -4957,6 +4990,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,
@@ -8065,10 +8108,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)
             },
         }),
@@ -8118,7 +8164,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,
         },
@@ -9037,6 +9083,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': {
@@ -9081,6 +9133,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)',
             },
@@ -9129,30 +9184,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}`),
@@ -9160,16 +9223,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}`),
             }),
@@ -9205,7 +9270,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,
@@ -9216,7 +9281,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})`,
         }),
     };
 };
@@ -10168,7 +10233,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');
@@ -10178,6 +10243,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': {
@@ -10193,8 +10261,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
@@ -10419,6 +10491,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',
@@ -10470,6 +10544,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/cjs/components-react/projects/react-ssr-wrapper/src/lib/components/carousel.wrapper.cjs

@@ -7,22 +7,22 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 var carousel = require('../dsr-components/carousel.cjs');
 
-const PCarousel = react.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 = react.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 = react.useRef();
     hooks.useEventCallback(elementRef, 'carouselChange', onCarouselChange);
     hooks.useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = hooks.usePrefix('p-carousel');
-    const propsToSync = [activeSlideIndex, alignHeader, aria, description, disablePagination, heading, headingSize, intl, pagination, rewind, skipLinkTarget, slidesPerPage, theme || hooks.useTheme(), width, wrapContent];
+    const propsToSync = [activeSlideIndex, alignHeader, aria, description, disablePagination, focusOnCenterSlide, gradientColor, heading, headingSize, intl, pagination, rewind, skipLinkTarget, slidesPerPage, theme || hooks.useTheme(), width, wrapContent];
     hooks.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: (jsxRuntime.jsx(carousel.DSRCarousel, { activeSlideIndex, alignHeader, aria, description, disablePagination, heading, headingSize, intl, pagination, rewind, skipLinkTarget, slidesPerPage, theme: theme || hooks.useTheme(), width, wrapContent, children })),
+                children: (jsxRuntime.jsx(carousel.DSRCarousel, { activeSlideIndex, alignHeader, aria, description, disablePagination, focusOnCenterSlide, gradientColor, heading, headingSize, intl, pagination, rewind, skipLinkTarget, slidesPerPage, theme: theme || hooks.useTheme(), width, wrapContent, children })),
             }
             : {
                 children,

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

@@ -4798,6 +4798,7 @@ const getComponentCss$12 = (isSidebarStartOpen, sidebarStartWidth, isSidebarEndO
 };
 
 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 +4826,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 +4968,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 +4988,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 +8106,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 +8162,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 +9081,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 +9131,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 +9182,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 +9221,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 +9268,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 +9279,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 +10231,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 +10241,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 +10259,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 +10489,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 +10542,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/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,

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

@@ -114,13 +114,13 @@ class DSRCarousel extends Component {
             // 'aria-controls': 'splide-track', // TODO: cross shadow dom? use native button tag instead of p-button-pure?
         };
         const headingId = 'heading';
-        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$11(hasHeadingPropOrSlot, hasDescriptionPropOrSlot, hasControlsSlot, this.props.headingSize, this.props.width, 
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$11(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, isInfinitePagination(this.props.amountOfPages), (alignHeaderDeprecationMap[this.props.alignHeader] ||
+            : this.props.pagination, 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 (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(Fragment, { children: [jsxs("div", { className: "header", children: [hasHeadingPropOrSlot &&
                                             (this.props.heading ? (jsx("h2", { className: "heading", id: headingId, children: this.props.heading })) : (jsx("div", { className: "heading", id: headingId, children: jsx("slot", { name: "heading" }) }))), hasDescriptionPropOrSlot && (this.props.description ? jsx("p", { children: this.props.description }) : jsx("slot", { name: "description" })), hasControlsSlot && jsx("slot", { name: "controls" }), jsxs("div", { className: "nav", children: [this.props.skipLinkTarget && (jsx(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) && (jsx(PButtonPure, { ...btnProps, icon: "arrow-left" })), (this.props.slidesPerPage === 'auto' || typeof this.props.slidesPerPage === 'object' || this.props.slidesPerPage < otherChildren.length) && (jsx(PButtonPure, { ...btnProps, icon: "arrow-right" }))] })] }), jsx("div", { id: "splide", className: "splide", ...parseAndGetAriaAttributes({
@@ -128,6 +128,7 @@ class DSRCarousel extends Component {
                                         ...parseAndGetAriaAttributes(this.props.aria),
                                     }), children: jsx("div", { className: "splide__track", children: jsx("div", { className: "splide__list", children: otherChildren.map((_, i) => (jsx("div", { className: "splide__slide", children: 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) && (jsx("div", { className: "pagination-container", "aria-hidden": "true", children: jsx("div", { className: "pagination" }) }))] })] }), this.props.children] }));
     }
+    getPageCount = () => (this.props.focusOnCenterSlide ? this.slides.length : this.props.amountOfPages);
 }
 
 export { DSRCarousel };

package/ssr/esm/lib/components/carousel.wrapper.d.ts

@@ -1,5 +1,5 @@
 import type { BaseProps } from '../../BaseProps';
-import type { CarouselAlignHeader, SelectedAriaAttributes, CarouselAriaAttribute, BreakpointCustomizable, CarouselHeadingSize, CarouselInternationalization, CarouselUpdateEventDetail, Theme, CarouselWidth } from '../types';
+import type { CarouselAlignHeader, SelectedAriaAttributes, CarouselAriaAttribute, BreakpointCustomizable, CarouselGradientColor, CarouselHeadingSize, CarouselInternationalization, CarouselUpdateEventDetail, Theme, CarouselWidth } from '../types';
 export type PCarouselProps = BaseProps & {
     /**
      * Defines which slide to be active (zero-based numbering).
@@ -21,6 +21,14 @@ export type PCarouselProps = BaseProps & {
      * @deprecated since v3.0.0, will be removed with next major release, use `pagination` instead. If true, the carousel will not show pagination bullets at the bottom.
      */
     disablePagination?: BreakpointCustomizable<boolean>;
+    /**
+     * Indicates whether focus should be set on the center slide. If true, the carousel loops by individual slide; otherwise, it loops by page.
+     */
+    focusOnCenterSlide?: boolean;
+    /**
+     * Adapts the background gradient for the left and right edge.
+     */
+    gradientColor?: CarouselGradientColor;
     /**
      * Defines the heading used in the carousel.
      */
@@ -92,6 +100,14 @@ export declare const PCarousel: import("react").ForwardRefExoticComponent<import
      * @deprecated since v3.0.0, will be removed with next major release, use `pagination` instead. If true, the carousel will not show pagination bullets at the bottom.
      */
     disablePagination?: BreakpointCustomizable<boolean>;
+    /**
+     * Indicates whether focus should be set on the center slide. If true, the carousel loops by individual slide; otherwise, it loops by page.
+     */
+    focusOnCenterSlide?: boolean;
+    /**
+     * Adapts the background gradient for the left and right edge.
+     */
+    gradientColor?: CarouselGradientColor;
     /**
      * Defines the heading used in the carousel.
      */

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

@@ -18,4 +18,5 @@ export declare class DSRCarousel extends Component<any> {
     private slides;
     private get hasNavigation();
     render(): JSX.Element;
+    private getPageCount;
 }

package/ssr/esm/lib/types.d.ts

@@ -696,6 +696,12 @@ declare const CAROUSEL_WIDTHS: readonly [
     "extended"
 ];
 export type CarouselWidth = (typeof CAROUSEL_WIDTHS)[number];
+declare const CAROUSEL_GRADIENT_COLORS: readonly [
+    "background-base",
+    "background-surface",
+    "none"
+];
+export type CarouselGradientColor = (typeof CAROUSEL_GRADIENT_COLORS)[number];
 declare const CAROUSEL_ALIGN_HEADERS: readonly [
     "start",
     "center",