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

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

@@ -4708,16 +4708,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': {
@@ -4728,7 +4726,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,
@@ -4737,49 +4799,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',
@@ -4791,15 +4882,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';
@@ -4827,11 +4933,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 +5075,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 +5095,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 +8213,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 +8269,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 +9188,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 +9238,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 +9289,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 +9328,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 +9375,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 +9386,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 +10338,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 +10348,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 +10366,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 +10596,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 +10649,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/canvas.wrapper.cjs

@@ -7,22 +7,20 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 var canvas = require('../dsr-components/canvas.cjs');
 
-const PCanvas = react.forwardRef(({ onDismissSidebarEnd, onDismissSidebarStart, sidebarEndOpen = false, sidebarEndWidth = 'medium', sidebarStartOpen = false, sidebarStartWidth = 'medium', className, children, ...rest }, ref) => {
+const PCanvas = react.forwardRef(({ sidebarEndIcon = 'configurate', sidebarEndOpen = false, sidebarStartIcon = 'menu-lines', sidebarStartOpen = false, theme, className, children, ...rest }, ref) => {
     const elementRef = react.useRef();
-    hooks.useEventCallback(elementRef, 'dismissSidebarEnd', onDismissSidebarEnd);
-    hooks.useEventCallback(elementRef, 'dismissSidebarStart', onDismissSidebarStart);
     const WebComponentTag = hooks.usePrefix('p-canvas');
-    const propsToSync = [sidebarEndOpen, sidebarEndWidth, sidebarStartOpen, sidebarStartWidth];
+    const propsToSync = [sidebarEndIcon, sidebarEndOpen, sidebarStartIcon, sidebarStartOpen, theme || hooks.useTheme()];
     hooks.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: (jsxRuntime.jsx(canvas.DSRCanvas, { sidebarEndOpen, sidebarEndWidth, sidebarStartOpen, sidebarStartWidth, children })),
+                children: (jsxRuntime.jsx(canvas.DSRCanvas, { sidebarEndIcon, sidebarEndOpen, sidebarStartIcon, sidebarStartOpen, theme: theme || hooks.useTheme(), children })),
             }
             : {
                 children,

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/canvas.cjs

@@ -3,15 +3,15 @@
 var jsxRuntime = require('react/jsx-runtime');
 require('../components/accordion.wrapper.cjs');
 require('../components/banner.wrapper.cjs');
-require('../components/button.wrapper.cjs');
+var button_wrapper = require('../components/button.wrapper.cjs');
 require('../components/button-group.wrapper.cjs');
-var buttonPure_wrapper = require('../components/button-pure.wrapper.cjs');
+require('../components/button-pure.wrapper.cjs');
 require('../components/button-tile.wrapper.cjs');
 require('../components/canvas.wrapper.cjs');
 require('../components/carousel.wrapper.cjs');
 require('../components/checkbox-wrapper.wrapper.cjs');
 require('../components/content-wrapper.wrapper.cjs');
-require('../components/crest.wrapper.cjs');
+var crest_wrapper = require('../components/crest.wrapper.cjs');
 require('../components/display.wrapper.cjs');
 require('../components/divider.wrapper.cjs');
 require('../components/fieldset.wrapper.cjs');
@@ -72,7 +72,7 @@ require('../components/text-list-item.wrapper.cjs');
 require('../components/textarea.wrapper.cjs');
 require('../components/textarea-wrapper.wrapper.cjs');
 require('../components/toast.wrapper.cjs');
-require('../components/wordmark.wrapper.cjs');
+var wordmark_wrapper = require('../components/wordmark.wrapper.cjs');
 var splitChildren = require('../../splitChildren.cjs');
 var react = require('react');
 var minifyCss = require('../../minifyCss.cjs');
@@ -80,40 +80,35 @@ var stripFocusAndHoverStyles = require('../../stripFocusAndHoverStyles.cjs');
 var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.cjs');
 
 /**
- * @slot {"name": "header", "description": "Renders a **sticky** header section above the content area." }
+ * @slot {"name": "header-start", "description": "Renders a **sticky** header section above the content area on the **start** side (**left** in **LTR** mode / **right** in **RTL** mode)." }
+ * @slot {"name": "header-end", "description": "Renders a **sticky** header section above the content area on the **end** side (**right** in **LTR** mode / **left** in **RTL** mode)." }
  * @slot {"name": "", "description": "Default slot for the main content" }
+ * @slot {"name": "title", "description": "Application name" }
  * @slot {"name": "footer", "description": "Shows a footer section, flowing under the content area when scrollable." }
  * @slot {"name": "sidebar-start", "description": "Shows a sidebar area on the **start** side (**left** in **LTR** mode / **right** in **RTL** mode). On mobile view it transforms into a flyout." }
  * @slot {"name": "sidebar-end", "description": "Shows a sidebar area on the **end** side (**right** in **LTR** mode / **left** in **RTL** mode). On mobile view it transforms into a flyout." }
  *
- * @controlled {"props": ["sidebarStartOpen"], "event": "dismissSidebarStart"}
- * @controlled {"props": ["sidebarEndOpen"], "event": "dismissSidebarEnd"}
- *
  * @experimental
  */
 class DSRCanvas extends react.Component {
     host;
     isDesktopView = false;
+    hasSidebarStart;
+    hasSidebarEnd;
     render() {
-        splitChildren.splitChildren(this.props.children);
-        const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getCanvasCss(this.props.sidebarStartOpen, this.props.sidebarStartWidth, this.props.sidebarEndOpen, this.props.sidebarEndWidth)));
-        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: "canvas", children: [jsxRuntime.jsx("header", { part: "header", children: jsxRuntime.jsx("slot", { name: "header" }) }), jsxRuntime.jsx("main", { part: "main", children: jsxRuntime.jsx("slot", {}) }), jsxRuntime.jsx("footer", { part: "footer", children: jsxRuntime.jsx("slot", { name: "footer" }) }), this.props.isDesktopView && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("aside", { 
-                                                    // "part" is not valid in TS
-                                                    // eslint-disable-next-line
-                                                    /* @ts-ignore */
-                                                    part: "sidebar-start", 
+        const { children, namedSlotChildren, otherChildren } = splitChildren.splitChildren(this.props.children);
+        const hasSidebarStart = namedSlotChildren.filter(({ props: { slot } }) => slot === 'sidebar-start').length > 0;
+        const hasSidebarEnd = namedSlotChildren.filter(({ props: { slot } }) => slot === 'sidebar-end').length > 0;
+        const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getCanvasCss(this.props.theme, this.props.sidebarStartOpen, this.props.sidebarEndOpen)));
+        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: "canvas", children: [jsxRuntime.jsxs("header", { children: [jsxRuntime.jsxs("div", { className: "header", children: [hasSidebarStart && (jsxRuntime.jsxs(button_wrapper.PButton, { theme: this.props.theme, icon: this.props.sidebarStartIcon, variant: "ghost", compact: true, "hide-label": "true", aria: { 'aria-expanded': this.props.sidebarStartOpen }, children: [this.props.sidebarStartOpen ? 'Close' : 'Open', " navigation sidebar"] })), jsxRuntime.jsx("h2", { children: jsxRuntime.jsx("slot", { name: "title" }) }), jsxRuntime.jsx("slot", { name: "header-start" })] }), jsxRuntime.jsx(crest_wrapper.PCrest, { className: "crest" }), jsxRuntime.jsx(wordmark_wrapper.PWordmark, { className: "wordmark", size: "inherit", theme: this.props.theme }), jsxRuntime.jsxs("div", { className: "header", children: [jsxRuntime.jsx("slot", { name: "header-end" }), hasSidebarEnd && (jsxRuntime.jsxs(button_wrapper.PButton, { theme: this.props.theme, icon: this.props.sidebarEndIcon, variant: "ghost", compact: true, "hide-label": "true", aria: { 'aria-expanded': this.props.sidebarEndOpen }, children: [this.props.sidebarEndOpen ? 'Close' : 'Open', " settings sidebar"] }))] })] }), jsxRuntime.jsx("main", { children: jsxRuntime.jsx("slot", {}) }), jsxRuntime.jsx("footer", { children: jsxRuntime.jsx("slot", { name: "footer" }) }), this.props.isDesktopView && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [hasSidebarStart && (jsxRuntime.jsx("aside", { className: "sidebar-start", 
                                                     // "inert" will be known from React 19 onwards, see https://github.com/facebook/react/pull/24730
                                                     // eslint-disable-next-line
                                                     /* @ts-ignore */
-                                                    inert: this.props.sidebarStartOpen ? null : true, children: [jsxRuntime.jsx(buttonPure_wrapper.PButtonPure, { className: "close", icon: "close", hideLabel: true, children: "Close Sidebar" }), jsxRuntime.jsx("slot", { name: "sidebar-start" })] }), jsxRuntime.jsxs("aside", { 
-                                                    // "part" is not valid in TS
-                                                    // eslint-disable-next-line
-                                                    /* @ts-ignore */
-                                                    part: "sidebar-end", 
+                                                    inert: this.props.sidebarStartOpen ? null : true, "aria-label": `Navigation sidebar ${this.props.sidebarStartOpen ? 'open' : 'closed'}`, children: jsxRuntime.jsx("slot", { name: "sidebar-start" }) })), hasSidebarEnd && (jsxRuntime.jsx("aside", { className: "sidebar-end", 
                                                     // "inert" will be known from React 19 onwards, see https://github.com/facebook/react/pull/24730
                                                     // eslint-disable-next-line
                                                     /* @ts-ignore */
-                                                    inert: this.props.sidebarEndOpen ? null : true, children: [jsxRuntime.jsx(buttonPure_wrapper.PButtonPure, { className: "close", icon: "close", hideLabel: true, children: "Close Sidebar" }), jsxRuntime.jsx("slot", { name: "sidebar-end" })] })] }))] }), !this.props.isDesktopView && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(flyout_wrapper.PFlyout, { open: this.props.sidebarStartOpen, position: "start", children: jsxRuntime.jsx("slot", { name: "sidebar-start" }) }), jsxRuntime.jsx(flyout_wrapper.PFlyout, { open: this.props.sidebarEndOpen, position: "end", children: jsxRuntime.jsx("slot", { name: "sidebar-end" }) })] }))] })] }), this.props.children] }));
+                                                    inert: this.props.sidebarEndOpen ? null : true, "aria-label": `Settings sidebar ${this.props.sidebarEndOpen ? 'open' : 'closed'}`, children: jsxRuntime.jsx("slot", { name: "sidebar-end" }) }))] }))] }), !this.props.isDesktopView && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [hasSidebarStart && (jsxRuntime.jsx(flyout_wrapper.PFlyout, { theme: this.props.theme, open: this.props.sidebarStartOpen, position: "start", children: jsxRuntime.jsx("slot", { name: "sidebar-start" }) })), hasSidebarEnd && (jsxRuntime.jsx(flyout_wrapper.PFlyout, { theme: this.props.theme, open: this.props.sidebarEndOpen, position: "end", children: jsxRuntime.jsx("slot", { name: "sidebar-end" }) }))] }))] })] }), this.props.children] }));
     }
 }