@porsche-design-system/components-react 3.25.1 → 3.26.0

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

@@ -4749,6 +4749,9 @@ const getComponentCss$14 = (theme, isSidebarStartOpen, isSidebarEndOpen) => {
                     },
                     ...getFocusJssStyle(theme, { slotted: 'a' }),
                 },
+                '&[name="sidebar-end-header"]': {
+                    display: 'block', // ensures header section of sidebar-end area is aligned correctly
+                },
                 '&[name="background"]': {
                     zIndex: 3,
                     display: 'block',
@@ -5006,7 +5009,7 @@ const getComponentCss$14 = (theme, isSidebarStartOpen, isSidebarEndOpen) => {
                     },
                 },
                 '&--end': {
-                    justifyContent: 'flex-end',
+                    justifyContent: 'space-between',
                     '&::before': {
                         background: `linear-gradient(180deg,var(${cssVarColorBackgroundBase}) 0%,var(${cssVarColorBackgroundBase}) 65%,transparent 100%)`,
                     },
@@ -7189,7 +7192,9 @@ const keyFramesDark = 'rerender-dark';
 const cssVariableFilter = '--p-internal-icon-filter';
 const isFlippableIcon = (name, source) => {
     return (!source &&
-        (name === 'arrow-double-left' ||
+        (name === 'arrow-compact-left' ||
+            name === 'arrow-compact-right' ||
+            name === 'arrow-double-left' ||
             name === 'arrow-double-right' ||
             name === 'arrow-first' ||
             name === 'arrow-head-left' ||
@@ -7203,6 +7208,7 @@ const isFlippableIcon = (name, source) => {
             name === 'increase' ||
             name === 'list' ||
             name === 'logout' ||
+            name === 'return' ||
             name === 'send'));
 };
 const getComponentCss$N = (name, source, color, size, theme) => {
@@ -8487,6 +8493,8 @@ const getListStyles$2 = (isOpen, direction, theme) => {
 };
 
 const cssVariableSelectPaddingInlineStart = '--p-internal-select-option-padding-left';
+const cssVarInternalSelectOptionScaling = '--p-internal-select-option-scaling';
+const scalingVar$1 = `var(${cssVarInternalSelectOptionScaling}, 1)`;
 // TODO: Enforce order of slotted text, img
 const getComponentCss$B = (theme) => {
     return getCss({
@@ -8516,14 +8524,17 @@ const getOptionStyles = (theme) => {
     const { primaryColor: primaryColorDark, contrastHighColor: contrastHighColorDark, disabledColor: disabledColorDark, backgroundSurfaceColor: backgroundSurfaceColorDark, contrastLowColor: contrastLowColorDark, } = getThemedColors('dark');
     const { primaryColor, contrastHighColor, backgroundSurfaceColor, disabledColor, contrastLowColor } = getThemedColors(theme);
     const { highlightColor } = getHighContrastColors();
+    const gap = `max(4px, ${scalingVar$1} * 12px)`;
+    const paddingBlock = `max(2px, ${scalingVar$1} * ${spacingStaticSmall})`;
+    const paddingInline = `max(4px, ${scalingVar$1} * var(${cssVariableSelectPaddingInlineStart}, 12px)) max(4px, ${scalingVar$1} * 12px)`;
     return {
         option: {
             fontWeight: fontWeightRegular,
             display: 'flex',
-            gap: '12px',
-            padding: `${spacingStaticSmall} 12px`,
-            paddingInlineStart: `var(${cssVariableSelectPaddingInlineStart}, 12px)`,
-            minHeight: `calc(${fontLineHeight} + ${spacingStaticSmall} * 2)`, // TODO: Added this line to preserve height for empty option
+            gap,
+            paddingBlock,
+            paddingInline,
+            minHeight: fontLineHeight, // preserves height for empty option
             color: contrastHighColor,
             ...prefersColorSchemeDarkMediaQuery(theme, {
                 color: contrastHighColorDark,
@@ -8531,7 +8542,7 @@ const getOptionStyles = (theme) => {
             cursor: 'pointer',
             textAlign: 'start',
             wordBreak: 'break-word',
-            boxSizing: 'border-box',
+            boxSizing: 'content-box',
             borderRadius: borderRadiusSmall,
             transition: `${getTransition('background-color')}, ${getTransition('color')}`,
             ...getNoResultsOptionJssStyle(),
@@ -8579,6 +8590,8 @@ const getOptionStyles = (theme) => {
     };
 };
 
+const cssVarInternalOptgroupScaling = '--p-internal-optgroup-scaling';
+const scalingVar = `var(${cssVarInternalOptgroupScaling}, 1)`;
 const getComponentCss$A = (isDisabled, theme) => getCss({
     '@global': {
         ':host': addImportantToEachRule({
@@ -8595,11 +8608,13 @@ const getComponentCss$A = (isDisabled, theme) => getCss({
 const getOptgroupStyles = (isDisabled, theme) => {
     const { primaryColor, disabledColor } = getThemedColors(theme);
     const { primaryColor: primaryColorDark, disabledColor: disabledColorDark } = getThemedColors('dark');
+    const gap = `max(2px, ${scalingVar} * ${spacingStaticSmall})`;
+    const padding = `max(2px, ${scalingVar} * ${spacingStaticSmall}) max(4px, ${scalingVar} * 12px)`;
     return {
         optgroup: {
             display: 'flex',
             flexDirection: 'column',
-            gap: spacingStaticSmall,
+            gap,
         },
         label: {
             color: primaryColor,
@@ -8613,7 +8628,7 @@ const getOptgroupStyles = (isDisabled, theme) => {
                 }),
             }),
             display: 'block',
-            padding: `${spacingStaticSmall} 12px`,
+            padding,
             fontSize: fontSizeTextXSmall,
             fontWeight: fontWeightSemiBold,
         },
@@ -9750,7 +9765,13 @@ 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$q = (direction, isOpen, isDisabled, hideLabel, state, isNativePopoverCase, theme, hasSlottedImage) => {
+const cssVarInternalSelectScaling = '--p-internal-select-scaling';
+const getComponentCss$q = (direction, isOpen, isDisabled, hideLabel, state, isNativePopoverCase, compact, theme, hasSlottedImage) => {
+    // Determines the scaling factor for the select size. In "compact" mode, it uses 0.5 to achieve a 36px select (compact size).
+    // Defaults to 1 for the standard size and can be overridden by the CSS variable `cssVarInternalSelectScaling`.
+    const scalingVar = `var(${cssVarInternalSelectScaling}, ${compact ? 0.5 : 1})`;
+    const gap = `max(2px, ${scalingVar} * ${spacingStaticXSmall})`;
+    const gridTemplateColumns = `minmax(0, 1fr) auto auto calc(max(2px, ${scalingVar} * ${formElementLayeredGap}) + ${borderWidthBase})`;
     return getCss({
         '@global': {
             ':host': {
@@ -9760,20 +9781,23 @@ const getComponentCss$q = (direction, isOpen, isDisabled, hideLabel, state, isNa
                     ...hostHiddenStyles,
                 }),
             },
+            '::slotted(*)': addImportantToEachRule({
+                '--p-internal-select-option-scaling': scalingVar,
+                '--p-internal-optgroup-scaling': scalingVar,
+            }),
             ...preventFoucOfNestedElementsStyles,
-            // TODO: re-use select-wrapper-style
-            button: getButtonStyles(isDisabled, direction, isOpen, state, theme, hasSlottedImage),
+            button: getButtonStyles(isDisabled, direction, isOpen, state, compact, theme, hasSlottedImage),
         },
         root: {
             display: 'grid',
-            gap: spacingStaticXSmall,
+            gap,
             // 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 plus the ellipsis dots.
             minWidth: `calc(1rem + ${formElementPaddingHorizontal} + ${borderWidthBase} * 2 + ${getCalculatedFormElementPaddingHorizontal(1)})`,
         },
         wrapper: {
             position: 'relative',
             display: 'grid',
-            gridTemplateColumns: `minmax(0, 1fr) auto auto ${formElementLayeredSafeZone}`,
+            gridTemplateColumns,
         },
         icon: {
             gridArea: '1/3',
@@ -9789,7 +9813,7 @@ const getComponentCss$q = (direction, isOpen, isDisabled, hideLabel, state, isNa
                 transform: 'rotate3d(0,0,1,180deg)',
             },
         },
-        listbox: getListStyles(isOpen, direction, theme),
+        listbox: getListStyles(isOpen, direction, compact, theme),
         'sr-only': getHiddenTextJssStyle(),
         // .label / .required
         ...getFunctionalComponentLabelStyles(isDisabled, hideLabel, theme),
@@ -9804,11 +9828,16 @@ const getComponentCss$q = (direction, isOpen, isDisabled, hideLabel, state, isNa
 };
 // TODO: Rename to JSSStyles
 // TODO: use getSlottedTextFieldTextareaSelectStyles() instead an manipulate selectors like done with PIN Code or even better make it configurable as parameter
-const getButtonStyles = (isDisabled, direction, isOpen, state, theme, hasSlottedImage) => {
+const getButtonStyles = (isDisabled, direction, isOpen, state, compact, theme, hasSlottedImage) => {
     const { primaryColor, disabledColor, backgroundColor, contrastMediumColor } = getThemedColors(theme);
     const { primaryColor: primaryColorDark, disabledColor: disabledColorDark, backgroundColor: backgroundColorDark, contrastMediumColor: contrastMediumColorDark, } = getThemedColors('dark');
     const { formStateColor, formStateHoverColor } = getThemedFormStateColors(theme, state);
     const { formStateColor: formStateColorDark, formStateHoverColor: formStateHoverColorDark } = getThemedFormStateColors('dark', state);
+    const scalingVar = `var(${cssVarInternalSelectScaling}, ${compact ? 0.5 : 1})`;
+    const height = `max(${fontLineHeight}, ${scalingVar} * (${fontLineHeight} + 10px))`;
+    const paddingBlock = `max(2px, ${scalingVar} * ${formElementPaddingVertical})`;
+    const paddingInline = `max(4px, ${scalingVar} * ${formElementPaddingHorizontal}) ${getCalculatedFormElementPaddingHorizontal(1)}`;
+    const gap = `max(4px, ${scalingVar} * 12px)`;
     return {
         textAlign: 'start', // TODO: Newly added (rest is copied from select-wrapper-dropdown), share rest for both components
         overflowX: 'hidden', // TODO: Newly added (rest is copied from select-wrapper-dropdown), share rest for both components
@@ -9816,12 +9845,12 @@ const getButtonStyles = (isDisabled, direction, isOpen, state, theme, hasSlotted
         gridArea: '1/1/1/-1',
         minWidth: 0,
         // TODO: abstract and re-use for multi-select, select-wrapper and text-field-wrapper
-        height: `calc(${fontLineHeight} + 10px + ${borderWidthBase} * 2 + ${spacingStaticSmall} * 2)`, // we need 10px additionally so input height becomes 54px, // we need 6px additionally so input height becomes 50px
+        height,
         font: textSmallStyle.font.replace('ex', 'ex + 6px'), // a minimum line-height is needed for input, otherwise value is scrollable in Chrome, +6px is alig
         margin: 0, // necessary reset for iOS Safari 15 (and maybe other browsers)
-        padding: `${formElementPaddingVertical} ${formElementPaddingHorizontal}`,
-        paddingInlineEnd: getCalculatedFormElementPaddingHorizontal(1),
-        boxSizing: 'border-box',
+        paddingBlock,
+        paddingInline,
+        boxSizing: 'content-box',
         outline: 0,
         WebkitAppearance: 'none', // iOS safari
         appearance: 'none',
@@ -9849,7 +9878,7 @@ const getButtonStyles = (isDisabled, direction, isOpen, state, theme, hasSlotted
         ...(hasSlottedImage && {
             '& > span': {
                 display: 'flex',
-                gap: '12px',
+                gap,
                 alignItems: 'center',
             },
             '& > span > span': {
@@ -9881,7 +9910,7 @@ const getButtonStyles = (isDisabled, direction, isOpen, state, theme, hasSlotted
             },
         }),
         ...(isOpen && {
-            ['paddingBottom' ]: `calc(${formElementPaddingVertical} + 1px)`, // Add padding to keep same height when border changes
+            ['paddingBottom' ]: `calc(${paddingBlock} + 1px)`, // Add padding to keep same height when border changes
             ['borderBottom' ]: addImportantToRule(`1px solid ${contrastMediumColor}`),
             ['borderBottomLeftRadius' ]: 0,
             ['borderBottomRightRadius' ]: 0,
@@ -9913,16 +9942,19 @@ const getButtonStyles = (isDisabled, direction, isOpen, state, theme, hasSlotted
 };
 // TODO: Rename to JSSStyles
 // TODO: Copied from multi-select, extract and use in select and multi-select
-const getListStyles = (isOpen, direction, theme) => {
+const getListStyles = (isOpen, direction, compact, theme) => {
     const { primaryColor, backgroundColor } = getThemedColors(theme);
     const { primaryColor: primaryColorDark, backgroundColor: backgroundColorDark } = getThemedColors('dark');
+    const scalingVar = `var(${cssVarInternalSelectScaling}, ${compact ? 0.5 : 1})`;
+    const gap = `max(2px, ${scalingVar} * ${spacingStaticSmall})`;
+    const padding = `max(2px, ${scalingVar} * 6px)`;
     return {
         position: 'absolute',
         margin: 0,
         display: isOpen ? 'flex' : 'none',
         flexDirection: 'column',
-        gap: spacingStaticSmall,
-        padding: '6px',
+        gap,
+        padding,
         ...textSmallStyle,
         zIndex: 10,
         // TODO: Inset inline 0
@@ -10214,6 +10246,7 @@ const getComponentCss$m = (size) => {
     });
 };
 
+const cssVarInternalSwitchScaling = '--p-internal-switch-scaling';
 const getColors$1 = (checked, disabled, loading, theme) => {
     const { primaryColor, contrastMediumColor, successColor, successColorDarken, disabledColor } = getThemedColors(theme);
     const { backgroundColor: lightThemeBackgroundColor } = getThemedColors('light');
@@ -10242,11 +10275,24 @@ const getColors$1 = (checked, disabled, loading, theme) => {
         textColor: disabledOrLoadingColor || primaryColor,
     };
 };
-const getComponentCss$l = (alignLabel, hideLabel, stretch, checked, disabled, loading, theme) => {
+const getComponentCss$l = (alignLabel, hideLabel, stretch, checked, disabled, loading, compact, theme) => {
     const { buttonBorderColor, buttonBorderColorHover, buttonBackgroundColor, buttonBackgroundColorHover, toggleBackgroundColor, toggleBackgroundColorHover, textColor, } = getColors$1(checked, disabled, loading, theme);
     const { buttonBorderColor: buttonBorderColorDark, buttonBorderColorHover: buttonBorderColorHoverDark, buttonBackgroundColor: buttonBackgroundColorDark, buttonBackgroundColorHover: buttonBackgroundColorHoverDark, toggleBackgroundColor: toggleBackgroundColorDark, toggleBackgroundColorHover: toggleBackgroundColorHoverDark, textColor: textColorDark, } = getColors$1(checked, disabled, loading, 'dark');
-    const toggleTransitionOffsetLtr = `calc(${fontLineHeight} - 2px)`;
-    const toggleTransitionOffsetRtl = `calc((${fontLineHeight} - 2px) * -1)`;
+    const minimumTouchTargetSize = '24px'; // Minimum touch target size to comply with accessibility guidelines.
+    const scalingVar = `var(${cssVarInternalSwitchScaling}, ${compact ? 0.6668 : 1})`;
+    // Determines the scaling factor for the switch size. In "compact" mode, it uses 0.6668 to achieve a 20px switch (compact size).
+    // Defaults to 1 for the standard size and can be overridden by the CSS variable `cssVarInternalSwitchScaling`.
+    const dimension = `calc(max(${SCALING_BASE_VALUE} * 0.75, ${scalingVar} * ${fontLineHeight}))`;
+    // Calculates the switch size and ensures a minimum size of 12px (0.75 * SCALING_BASE_VALUE).
+    // Scales proportionally with the line height and the scaling factor.
+    const dimensionFull = `calc(${dimension} + ${borderWidthBase} * 2)`; // Calculates the total size of the switch including its borders.
+    const touchTargetSizeDiff = `calc(${minimumTouchTargetSize} - ${dimensionFull})`; // Difference between the minimum touch target size and the switch full size.
+    const gap = `max(${spacingStaticXSmall}, calc(${spacingStaticSmall} - (max(0px, ${touchTargetSizeDiff}))))`;
+    // Adjusts padding to maintain consistent spacing when the switch is smaller than the minimum touch target size.
+    // Uses asymmetric padding instead of `gap` to ensure there is no non-clickable area between the label and the input.
+    const marginTop = `max(0px, calc((${fontLineHeight} - ${dimensionFull}) / 2))`; // Vertically centers the switch label relative to the switch size (depending on which is smaller).
+    const paddingTop = `max(0px, calc((${dimensionFull} - ${fontLineHeight}) / 2))`; // Vertically centers the switch label relative to the switch size (depending on which is smaller).
+    const inset = `calc(-${borderWidthBase} - max(0px, ${touchTargetSizeDiff} / 2))`; // Positions the switch ::before pseudo-element with a negative offset to align it with the touch target.
     return getCss({
         '@global': {
             ':host': {
@@ -10255,7 +10301,8 @@ const getComponentCss$l = (alignLabel, hideLabel, stretch, checked, disabled, lo
                 })),
                 ...addImportantToEachRule({
                     outline: 0, // custom element is able to delegate the focus
-                    gap: spacingStaticSmall,
+                    font: `${fontSizeTextSmall} ${fontFamily}`, // needed for correct gap definition based on ex-unit
+                    gap,
                     ...colorSchemeStyles,
                     ...hostHiddenStyles,
                     ...buildResponsiveStyles(stretch, (stretchValue) => ({
@@ -10267,15 +10314,16 @@ const getComponentCss$l = (alignLabel, hideLabel, stretch, checked, disabled, lo
             },
             ...preventFoucOfNestedElementsStyles,
             button: {
+                position: 'relative', // ensures relative positioning for ::before pseudo element
                 display: 'flex',
                 alignItems: 'center',
                 flexShrink: 0,
-                width: `calc(${fontLineHeight} * 2 - ${borderWidthBase}*2)`,
-                height: fontLineHeight,
+                width: `calc(${dimension} * 2 - ${borderWidthBase} * 2)`,
+                height: dimension,
                 font: `${fontSizeTextSmall} ${fontFamily}`, // needed for correct width and height definition based on ex-unit
                 boxSizing: 'content-box',
                 border: `${borderWidthBase} solid ${buttonBorderColor}`,
-                borderRadius: `calc((${fontLineHeight} + ${borderWidthBase}*2) / 2)`,
+                borderRadius: `calc((${dimension} + ${borderWidthBase} * 2) / 2)`,
                 backgroundColor: buttonBackgroundColor,
                 cursor: isDisabledOrLoading(disabled, loading) ? 'not-allowed' : 'pointer',
                 transition: `${getTransition('background-color')}, ${getTransition('border-color')}, ${getTransition('color')}`,
@@ -10285,6 +10333,7 @@ const getComponentCss$l = (alignLabel, hideLabel, stretch, checked, disabled, lo
                 }),
                 margin: 0, // Removes default button margin on safari 15
                 padding: 0,
+                marginTop,
                 WebkitAppearance: 'none', // iOS safari
                 appearance: 'none',
                 ...(!isDisabledOrLoading(disabled, loading) &&
@@ -10305,6 +10354,13 @@ const getComponentCss$l = (alignLabel, hideLabel, stretch, checked, disabled, lo
                         },
                     })),
                 ...getFocusJssStyle(theme),
+                '&::before': {
+                    // Ensures the touch target is at least 24px, even if the switch is smaller than the minimum touch target size.
+                    // This pseudo-element expands the clickable area without affecting the visual size of the switch itself.
+                    content: '""',
+                    position: 'absolute',
+                    inset,
+                },
             },
             label: {
                 ...textSmallStyle,
@@ -10319,22 +10375,22 @@ const getComponentCss$l = (alignLabel, hideLabel, stretch, checked, disabled, lo
                     // TODO: we should remove 'left' here and map the value in the component class already to 'start' but might be difficult due to breakpoint customizable prop value
                     order: alignLabelValue === 'left' || alignLabelValue === 'start' ? -1 : 0,
                 })), buildResponsiveStyles(hideLabel, (isHidden) => getHiddenTextJssStyle(isHidden, {
-                    paddingTop: '2px', // currently, line-height of textSmall doesn't match height of switch
+                    paddingTop,
                 }))),
             },
         },
         toggle: {
             display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            width: `calc(${fontLineHeight} - ${borderWidthBase}*2)`,
-            height: `calc(${fontLineHeight} - ${borderWidthBase}*2)`,
+            placeItems: 'center',
+            placeContent: 'center',
+            width: `calc(${dimension} - ${borderWidthBase} * 2)`,
+            height: `calc(${dimension} - ${borderWidthBase} * 2)`,
             borderRadius: '50%',
             backgroundColor: toggleBackgroundColor,
             transition: `${getTransition('background-color')}, ${getTransition('transform')}`,
-            transform: `translate3d(${checked ? toggleTransitionOffsetLtr : '2px'}, 0, 0)`,
+            transform: `translate3d(${checked ? `calc(100% + ${borderWidthBase})` : borderWidthBase}, 0, 0)`,
             '&:dir(rtl)': {
-                transform: `translate3d(${checked ? toggleTransitionOffsetRtl : '-2px'}, 0, 0)`,
+                transform: `translate3d(calc(${checked ? `calc(100% + ${borderWidthBase})` : borderWidthBase} * -1), 0, 0)`,
             },
             ...prefersColorSchemeDarkMediaQuery(theme, {
                 backgroundColor: toggleBackgroundColorDark,
@@ -10342,8 +10398,8 @@ const getComponentCss$l = (alignLabel, hideLabel, stretch, checked, disabled, lo
         },
         ...(loading && {
             spinner: {
-                width: `calc(${fontLineHeight} + ${borderWidthBase}*2)`,
-                height: `calc(${fontLineHeight} + ${borderWidthBase}*2)`,
+                width: dimensionFull,
+                height: dimensionFull,
             },
         }),
         // .loading
@@ -10949,6 +11005,7 @@ const showCustomCalendarOrTimeIndicator = (isCalendar, isTime) => {
 
 const cssVariableInputPaddingStart = '--p-internal-text-field-input-padding-start';
 const cssVariableInputPaddingEnd = '--p-internal-text-field-input-padding-end';
+const cssVarInternalTextFieldScaling = '--p-internal-text-field-scaling';
 const getComponentCss$8 = (isDisabled, isReadonly, hideLabel, state, hasUnitOrVisibleCounter, unitPosition, inputType, showPasswordToggle, isWithinForm, hasSubmitButton, theme, unitLength) => {
     const isSearch = isType(inputType, 'search');
     const isPassword = isType(inputType, 'password');
@@ -10962,6 +11019,12 @@ const getComponentCss$8 = (isDisabled, isReadonly, hideLabel, state, hasUnitOrVi
     const counterCharacterLengthCssVar = 'var(--p-internal-counter-character-length)';
     const paddingInlineIfUnitOrCounter = hasUnitOrVisibleCounter &&
         `calc(${formElementLayeredGap} + ${formElementPaddingHorizontal} + ${borderWidthBase} + ${counterCharacterLengthCssVar} * 1ch * log(2.6))`;
+    // Determines the scaling factor for the text field size. In "compact" mode, it uses 0.5 to achieve a 36px text field (compact size).
+    // Defaults to 1 for the standard size and can be overridden by the CSS variable `cssVarInternalTextFieldScaling`.
+    const scalingVar = `var(${cssVarInternalTextFieldScaling}, 1)`;
+    const paddingBlock = `max(2px, ${formElementPaddingVertical} * ${scalingVar})`;
+    const paddingInline = `max(4px, ${formElementPaddingHorizontal} * ${scalingVar})`;
+    const height = `max(${fontLineHeight}, ${scalingVar} * (${fontLineHeight} + 10px))`;
     return getCss({
         '@global': {
             ':host': {
@@ -10976,7 +11039,11 @@ const getComponentCss$8 = (isDisabled, isReadonly, hideLabel, state, hasUnitOrVi
             ...addImportantToEachRule({
                 ...getSlottedTextFieldTextareaSelectStyles('input', state, false, theme, {
                     gridArea: '1/1/1/-1',
-                    padding: `${formElementPaddingVertical} ${formElementPaddingHorizontal}`,
+                    paddingBlock,
+                    paddingInline,
+                    width: 'auto',
+                    height,
+                    boxSizing: 'content-box',
                     paddingInlineStart: hasUnitOrVisibleCounter && unitPosition === 'prefix'
                         ? paddingInlineIfUnitOrCounter
                         : `var(${cssVariableInputPaddingStart})`, // iOS Safari 14.5 can't handle padding-inline shorthand with css variables
@@ -11012,10 +11079,10 @@ const getComponentCss$8 = (isDisabled, isReadonly, hideLabel, state, hasUnitOrVi
         root: {
             [cssVariableInputPaddingStart]: isSearchWithoutFormOrSubmitButton
                 ? getCalculatedFormElementPaddingHorizontal(1)
-                : formElementPaddingHorizontal,
+                : paddingInline,
             [cssVariableInputPaddingEnd]: isSearchOrPassword || isCalendarOrTimeWithCustomIndicator
                 ? getCalculatedFormElementPaddingHorizontal(isSearchWithForm && hasSubmitButton ? 2 : 1)
-                : formElementPaddingHorizontal,
+                : paddingInline,
             display: 'grid',
             gap: spacingStaticXSmall,
             // min width is needed for showing at least 1 character in very narrow containers. The "2rem" value is the minimum safe zone to show at least 1 character plus the ellipsis dots.

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

@@ -3460,7 +3460,7 @@ const getCDNBaseURL = () => global.PORSCHE_DESIGN_SYSTEM_CDN_URL + "/porsche-des
 var CRESTS_MANIFEST = { "porscheCrest": { "1x": { "png": "porsche-crest.d76137c@1x.png", "webp": "porsche-crest.0d0cc89@1x.webp" }, "2x": { "png": "porsche-crest.8a292fb@2x.png", "webp": "porsche-crest.2245c45@2x.webp" }, "3x": { "png": "porsche-crest.18d6f02@3x.png", "webp": "porsche-crest.19b4292@3x.webp" } } };
 
 // index.ts
-var ICONS_MANIFEST = { "360": "360.0600731.svg", "accessibility": "accessibility.087d747.svg", "active-cabin-ventilation": "active-cabin-ventilation.b081399.svg", "add": "add.fac861a.svg", "adjust": "adjust.ca46bd4.svg", "arrow-double-down": "arrow-double-down.61ae4d7.svg", "arrow-double-left": "arrow-double-left.1b576eb.svg", "arrow-double-right": "arrow-double-right.dcfabff.svg", "arrow-double-up": "arrow-double-up.fb73db5.svg", "arrow-down": "arrow-down.49c6983.svg", "arrow-first": "arrow-first.beb7d9f.svg", "arrow-head-down": "arrow-head-down.1e3cbb8.svg", "arrow-head-left": "arrow-head-left.cf1395d.svg", "arrow-head-right": "arrow-head-right.304b330.svg", "arrow-head-up": "arrow-head-up.6d3fd23.svg", "arrow-last": "arrow-last.cc24903.svg", "arrow-left": "arrow-left.e03c25b.svg", "arrow-right": "arrow-right.872716b.svg", "arrow-up": "arrow-up.9d294d1.svg", "attachment": "attachment.8f3dd0a.svg", "augmented-reality": "augmented-reality.8b6ce95.svg", "battery-empty": "battery-empty.38b4b15.svg", "battery-empty-co2": "battery-empty-co2.c4cabef.svg", "battery-empty-fuel": "battery-empty-fuel.e833e13.svg", "battery-full": "battery-full.03de75d.svg", "bell": "bell.1eab3a2.svg", "bookmark": "bookmark.9d6982f.svg", "bookmark-filled": "bookmark-filled.327ac78.svg", "broadcast": "broadcast.0ad5a15.svg", "calculator": "calculator.a323a2d.svg", "calendar": "calendar.70a6a12.svg", "camera": "camera.e5e95b9.svg", "car": "car.35229c9.svg", "car-battery": "car-battery.895510f.svg", "card": "card.f284448.svg", "charging-active": "charging-active.c3aa214.svg", "charging-state": "charging-state.f56d8df.svg", "charging-station": "charging-station.5ff1ed4.svg", "chart": "chart.c8c32d2.svg", "chat": "chat.7945544.svg", "check": "check.8ba06be.svg", "city": "city.5ae672c.svg", "climate": "climate.a9d5818.svg", "climate-control": "climate-control.ce31939.svg", "clock": "clock.c88a1ef.svg", "close": "close.eec3c5d.svg", "closed-caption": "closed-caption.ceaf6cb.svg", "co2-class": "co2-class.fc49211.svg", "co2-emission": "co2-emission.c42e7f8.svg", "compare": "compare.6578829.svg", "configurate": "configurate.5311c8d.svg", "copy": "copy.0fcd086.svg", "country-road": "country-road.d2bbc5a.svg", "cubic-capacity": "cubic-capacity.7b0b8c8.svg", "delete": "delete.5a8c8ca.svg", "disable": "disable.5918c32.svg", "dislike": "dislike.51614b0.svg", "dislike-filled": "dislike-filled.e1a8c4d.svg", "document": "document.df36b6c.svg", "download": "download.c06f455.svg", "duration": "duration.94e5252.svg", "edit": "edit.330f321.svg", "email": "email.f2530de.svg", "error-filled": "error-filled.a4d06ed.svg", "exclamation": "exclamation.46cd17b.svg", "external": "external.fb677b9.svg", "filter": "filter.610f808.svg", "fingerprint": "fingerprint.6a85170.svg", "flash": "flash.88a2ada.svg", "fuel-station": "fuel-station.f7bdf51.svg", "garage": "garage.5014e8d.svg", "gift": "gift.7beb1eb.svg", "globe": "globe.56cc8fc.svg", "grid": "grid.06bc31a.svg", "heart": "heart.9a5962e.svg", "heart-filled": "heart-filled.dd7decf.svg", "highway": "highway.b7c0a70.svg", "home": "home.7b1d1da.svg", "horn": "horn.bf47b1a.svg", "image": "image.b2614f0.svg", "increase": "increase.700012f.svg", "information": "information.da41162.svg", "information-filled": "information-filled.8f08911.svg", "key": "key.ee5d89b.svg", "leaf": "leaf.92ca6a6.svg", "leather": "leather.1d2769a.svg", "light": "light.f0eb8e4.svg", "like": "like.a7468cd.svg", "like-filled": "like-filled.a0126c1.svg", "list": "list.411dd00.svg", "locate": "locate.6554f9e.svg", "lock": "lock.243281a.svg", "lock-open": "lock-open.95803d2.svg", "logo-apple-podcast": "logo-apple-podcast.09be038.svg", "logo-baidu": "logo-baidu.9e89c7d.svg", "logo-delicious": "logo-delicious.e83f574.svg", "logo-digg": "logo-digg.f096670.svg", "logo-facebook": "logo-facebook.74abe88.svg", "logo-foursquare": "logo-foursquare.d638fd8.svg", "logo-gmail": "logo-gmail.5f96ee2.svg", "logo-google": "logo-google.1dee423.svg", "logo-hatena": "logo-hatena.da509f0.svg", "logo-instagram": "logo-instagram.b916daa.svg", "logo-kaixin": "logo-kaixin.b1211a2.svg", "logo-kakaotalk": "logo-kakaotalk.38f5396.svg", "logo-linkedin": "logo-linkedin.b72559f.svg", "logo-naver": "logo-naver.75588fe.svg", "logo-pinterest": "logo-pinterest.e8f6963.svg", "logo-qq": "logo-qq.6d9b6d9.svg", "logo-qq-share": "logo-qq-share.ee864d9.svg", "logo-reddit": "logo-reddit.da13e44.svg", "logo-skyrock": "logo-skyrock.eb2f28d.svg", "logo-sohu": "logo-sohu.a30c66b.svg", "logo-spotify": "logo-spotify.2ec4b2d.svg", "logo-tecent": "logo-tecent.d119e85.svg", "logo-telegram": "logo-telegram.d151481.svg", "logo-tiktok": "logo-tiktok.2f3a465.svg", "logo-tumblr": "logo-tumblr.c689f44.svg", "logo-twitter": "logo-twitter.5f2490a.svg", "logo-viber": "logo-viber.198bd43.svg", "logo-vk": "logo-vk.37b94e0.svg", "logo-wechat": "logo-wechat.83b2b98.svg", "logo-weibo": "logo-weibo.c8dacee.svg", "logo-whatsapp": "logo-whatsapp.add9a6d.svg", "logo-x": "logo-x.5f2490a.svg", "logo-xing": "logo-xing.3a8df0f.svg", "logo-yahoo": "logo-yahoo.8cbd0ba.svg", "logo-youku": "logo-youku.fe988d0.svg", "logo-youtube": "logo-youtube.da3798f.svg", "logout": "logout.7ec7451.svg", "map": "map.c16f618.svg", "menu-dots-horizontal": "menu-dots-horizontal.788f7fa.svg", "menu-dots-vertical": "menu-dots-vertical.4970a65.svg", "menu-lines": "menu-lines.e332216.svg", "minus": "minus.f6d964c.svg", "mobile": "mobile.7f35446.svg", "moon": "moon.5b73246.svg", "new-chat": "new-chat.95ffd2e.svg", "oil-can": "oil-can.cb58fc7.svg", "parking-brake": "parking-brake.45704bd.svg", "parking-light": "parking-light.c49a231.svg", "pause": "pause.e41b935.svg", "phone": "phone.f4f774b.svg", "pin": "pin.3417cec.svg", "pin-filled": "pin-filled.7b8e9ba.svg", "play": "play.24226d4.svg", "plug": "plug.c159935.svg", "plus": "plus.319993e.svg", "preheating": "preheating.e2a796f.svg", "printer": "printer.f59b0ee.svg", "purchase": "purchase.9cd6d65.svg", "push-pin": "push-pin.89e4ead.svg", "push-pin-off": "push-pin-off.ba99213.svg", "qr": "qr.87a49a3.svg", "question": "question.3402a63.svg", "racing-flag": "racing-flag.b7ddcc8.svg", "refresh": "refresh.41fd868.svg", "replay": "replay.55a99f2.svg", "reset": "reset.e53d52f.svg", "roof-closed": "roof-closed.018d021.svg", "roof-open": "roof-open.51c8ee6.svg", "route": "route.f4fbbb4.svg", "rss": "rss.0e77baf.svg", "save": "save.6171ff5.svg", "screen": "screen.420be15.svg", "search": "search.3f0f1ce.svg", "send": "send.b32099c.svg", "share": "share.a0b30da.svg", "shopping-bag": "shopping-bag.3f91a9b.svg", "shopping-bag-filled": "shopping-bag-filled.abf6c98.svg", "shopping-cart": "shopping-cart.370e224.svg", "shopping-cart-filled": "shopping-cart-filled.e0c3a65.svg", "sidebar": "sidebar.8e43896.svg", "sidelights": "sidelights.65c9dd9.svg", "snowflake": "snowflake.83907b3.svg", "sort": "sort.92b50bd.svg", "stack": "stack.804af93.svg", "star": "star.4c5bb15.svg", "star-filled": "star-filled.84ef2f6.svg", "steering-wheel": "steering-wheel.4dea19e.svg", "stopwatch": "stopwatch.0e048a4.svg", "subtract": "subtract.57eed1d.svg", "success": "success.b16d4c1.svg", "success-filled": "success-filled.1832d98.svg", "sun": "sun.4301cbd.svg", "switch": "switch.66f74c4.svg", "tablet": "tablet.07341ac.svg", "tachometer": "tachometer.3a2fc3c.svg", "tire": "tire.e5c9372.svg", "truck": "truck.2c26c04.svg", "upload": "upload.d1f5a2a.svg", "user": "user.c18dabe.svg", "user-filled": "user-filled.2ea646d.svg", "user-group": "user-group.79cdf86.svg", "user-manual": "user-manual.470e243.svg", "video": "video.7590689.svg", "view": "view.5b4d7f6.svg", "view-off": "view-off.a4ede54.svg", "volume-off": "volume-off.bcd49e7.svg", "volume-up": "volume-up.2084f60.svg", "warning": "warning.59927e6.svg", "warning-filled": "warning-filled.1f6fe21.svg", "weight": "weight.b57a60d.svg", "wifi": "wifi.e2a8d9c.svg", "work": "work.9dd71a4.svg", "wrench": "wrench.09a2a67.svg", "wrenches": "wrenches.d2ed45d.svg", "zoom-in": "zoom-in.ff299b8.svg", "zoom-out": "zoom-out.ebb6246.svg" };
+var ICONS_MANIFEST = { "360": "360.0600731.svg", "4-wheel-drive": "4-wheel-drive.9c218bf.svg", "accessibility": "accessibility.087d747.svg", "active-cabin-ventilation": "active-cabin-ventilation.b081399.svg", "add": "add.fac861a.svg", "adjust": "adjust.ca46bd4.svg", "aggregation": "aggregation.96f06e5.svg", "arrow-compact-down": "arrow-compact-down.9b37afe.svg", "arrow-compact-left": "arrow-compact-left.7169de6.svg", "arrow-compact-right": "arrow-compact-right.cc2d1d2.svg", "arrow-compact-up": "arrow-compact-up.36724bb.svg", "arrow-double-down": "arrow-double-down.61ae4d7.svg", "arrow-double-left": "arrow-double-left.1b576eb.svg", "arrow-double-right": "arrow-double-right.dcfabff.svg", "arrow-double-up": "arrow-double-up.fb73db5.svg", "arrow-down": "arrow-down.49c6983.svg", "arrow-first": "arrow-first.beb7d9f.svg", "arrow-head-down": "arrow-head-down.1e3cbb8.svg", "arrow-head-left": "arrow-head-left.cf1395d.svg", "arrow-head-right": "arrow-head-right.304b330.svg", "arrow-head-up": "arrow-head-up.6d3fd23.svg", "arrow-last": "arrow-last.cc24903.svg", "arrow-left": "arrow-left.e03c25b.svg", "arrow-right": "arrow-right.872716b.svg", "arrow-up": "arrow-up.9d294d1.svg", "arrows": "arrows.de040f9.svg", "attachment": "attachment.8f3dd0a.svg", "augmented-reality": "augmented-reality.8b6ce95.svg", "battery-empty": "battery-empty.38b4b15.svg", "battery-empty-co2": "battery-empty-co2.c4cabef.svg", "battery-empty-fuel": "battery-empty-fuel.e833e13.svg", "battery-full": "battery-full.03de75d.svg", "battery-half": "battery-half.11f1ef8.svg", "battery-one-quarter": "battery-one-quarter.91235a0.svg", "battery-three-quarters": "battery-three-quarters.dcf768f.svg", "bell": "bell.1eab3a2.svg", "bookmark": "bookmark.9d6982f.svg", "bookmark-filled": "bookmark-filled.327ac78.svg", "brain": "brain.838387a.svg", "broadcast": "broadcast.0ad5a15.svg", "cabriolet": "cabriolet.ab33aab.svg", "calculator": "calculator.a323a2d.svg", "calendar": "calendar.70a6a12.svg", "camera": "camera.e5e95b9.svg", "car": "car.35229c9.svg", "car-battery": "car-battery.895510f.svg", "card": "card.f284448.svg", "charging-active": "charging-active.c3aa214.svg", "charging-network": "charging-network.a40072f.svg", "charging-state": "charging-state.f56d8df.svg", "charging-station": "charging-station.5ff1ed4.svg", "chart": "chart.c8c32d2.svg", "chat": "chat.7945544.svg", "check": "check.8ba06be.svg", "city": "city.5ae672c.svg", "climate": "climate.a9d5818.svg", "climate-control": "climate-control.ce31939.svg", "clock": "clock.c88a1ef.svg", "close": "close.eec3c5d.svg", "closed-caption": "closed-caption.ceaf6cb.svg", "cloud": "cloud.2c3959e.svg", "co2-class": "co2-class.fc49211.svg", "co2-emission": "co2-emission.c42e7f8.svg", "color-picker": "color-picker.598f402.svg", "compare": "compare.6578829.svg", "compass": "compass.f90f319.svg", "configurate": "configurate.5311c8d.svg", "copy": "copy.0fcd086.svg", "country-road": "country-road.d2bbc5a.svg", "coupe": "coupe.7549e3e.svg", "cubic-capacity": "cubic-capacity.7b0b8c8.svg", "cut": "cut.851e5c2.svg", "delete": "delete.5a8c8ca.svg", "disable": "disable.5918c32.svg", "dislike": "dislike.51614b0.svg", "dislike-filled": "dislike-filled.e1a8c4d.svg", "document": "document.df36b6c.svg", "door": "door.61c32d6.svg", "download": "download.c06f455.svg", "drag": "drag.9e893fd.svg", "duration": "duration.94e5252.svg", "ear": "ear.27a802f.svg", "edit": "edit.330f321.svg", "email": "email.f2530de.svg", "error": "error.b8ae9ad.svg", "error-filled": "error-filled.a4d06ed.svg", "exclamation": "exclamation.46cd17b.svg", "exclamation-filled": "exclamation-filled.9d09ed1.svg", "external": "external.fb677b9.svg", "fast-backward": "fast-backward.a71faae.svg", "fast-forward": "fast-forward.1e6fa9f.svg", "file-csv": "file-csv.4140e24.svg", "file-excel": "file-excel.56d577d.svg", "filter": "filter.610f808.svg", "fingerprint": "fingerprint.6a85170.svg", "flag": "flag.7af5baf.svg", "flash": "flash.88a2ada.svg", "fuel-station": "fuel-station.f7bdf51.svg", "garage": "garage.5014e8d.svg", "genuine-parts": "genuine-parts.6bfddde.svg", "geo-localization": "geo-localization.516d603.svg", "gift": "gift.7beb1eb.svg", "globe": "globe.56cc8fc.svg", "grid": "grid.06bc31a.svg", "grip": "grip.5ec4289.svg", "group": "group.051436a.svg", "hand": "hand.4e85714.svg", "heart": "heart.9a5962e.svg", "heart-filled": "heart-filled.dd7decf.svg", "highway": "highway.bf0eb24.svg", "highway-filled": "highway-filled.38e93fb.svg", "history": "history.f09645c.svg", "home": "home.7b1d1da.svg", "horn": "horn.bf47b1a.svg", "image": "image.b2614f0.svg", "increase": "increase.700012f.svg", "information": "information.da41162.svg", "information-filled": "information-filled.8f08911.svg", "key": "key.ee5d89b.svg", "laptop": "laptop.c422480.svg", "leaf": "leaf.92ca6a6.svg", "leather": "leather.1d2769a.svg", "light": "light.f0eb8e4.svg", "like": "like.a7468cd.svg", "like-filled": "like-filled.a0126c1.svg", "limousine": "limousine.87799d5.svg", "linked": "linked.8f30cb5.svg", "list": "list.411dd00.svg", "locate": "locate.6554f9e.svg", "lock": "lock.243281a.svg", "lock-open": "lock-open.95803d2.svg", "logo-apple-carplay": "logo-apple-carplay.c872af9.svg", "logo-apple-music": "logo-apple-music.1395f37.svg", "logo-apple-podcast": "logo-apple-podcast.09be038.svg", "logo-baidu": "logo-baidu.9e89c7d.svg", "logo-delicious": "logo-delicious.e83f574.svg", "logo-digg": "logo-digg.f096670.svg", "logo-facebook": "logo-facebook.74abe88.svg", "logo-foursquare": "logo-foursquare.d638fd8.svg", "logo-gmail": "logo-gmail.5f96ee2.svg", "logo-google": "logo-google.1dee423.svg", "logo-hatena": "logo-hatena.da509f0.svg", "logo-instagram": "logo-instagram.b916daa.svg", "logo-kaixin": "logo-kaixin.b1211a2.svg", "logo-kakaotalk": "logo-kakaotalk.38f5396.svg", "logo-kununu": "logo-kununu.79344ff.svg", "logo-linkedin": "logo-linkedin.b72559f.svg", "logo-naver": "logo-naver.75588fe.svg", "logo-pinterest": "logo-pinterest.e8f6963.svg", "logo-qq": "logo-qq.6d9b6d9.svg", "logo-qq-share": "logo-qq-share.ee864d9.svg", "logo-reddit": "logo-reddit.da13e44.svg", "logo-skyrock": "logo-skyrock.eb2f28d.svg", "logo-snapchat": "logo-snapchat.ef706a2.svg", "logo-sohu": "logo-sohu.a30c66b.svg", "logo-spotify": "logo-spotify.2ec4b2d.svg", "logo-tecent": "logo-tecent.d119e85.svg", "logo-telegram": "logo-telegram.d151481.svg", "logo-tiktok": "logo-tiktok.2f3a465.svg", "logo-tumblr": "logo-tumblr.c689f44.svg", "logo-twitter": "logo-twitter.5f2490a.svg", "logo-viber": "logo-viber.198bd43.svg", "logo-vk": "logo-vk.37b94e0.svg", "logo-wechat": "logo-wechat.83b2b98.svg", "logo-weibo": "logo-weibo.c8dacee.svg", "logo-whatsapp": "logo-whatsapp.add9a6d.svg", "logo-x": "logo-x.5f2490a.svg", "logo-xing": "logo-xing.3a8df0f.svg", "logo-yahoo": "logo-yahoo.8cbd0ba.svg", "logo-youku": "logo-youku.fe988d0.svg", "logo-youtube": "logo-youtube.da3798f.svg", "logout": "logout.7ec7451.svg", "map": "map.c16f618.svg", "menu-dots-horizontal": "menu-dots-horizontal.788f7fa.svg", "menu-dots-vertical": "menu-dots-vertical.4970a65.svg", "menu-lines": "menu-lines.e332216.svg", "microphone": "microphone.8ecdce6.svg", "minus": "minus.f6d964c.svg", "mobile": "mobile.7f35446.svg", "moon": "moon.5b73246.svg", "new-chat": "new-chat.95ffd2e.svg", "news": "news.5b604b0.svg", "north-arrow": "north-arrow.2da1dbe.svg", "oil-can": "oil-can.cb58fc7.svg", "online-search": "online-search.90e9ab1.svg", "parking-brake": "parking-brake.45704bd.svg", "parking-light": "parking-light.c49a231.svg", "paste": "paste.dd60261.svg", "pause": "pause.e41b935.svg", "phone": "phone.f4f774b.svg", "pin": "pin.3417cec.svg", "pin-filled": "pin-filled.7b8e9ba.svg", "pivot": "pivot.3ae18b8.svg", "play": "play.24226d4.svg", "plug": "plug.c159935.svg", "plus": "plus.319993e.svg", "preheating": "preheating.e2a796f.svg", "price-tag": "price-tag.f0d3917.svg", "printer": "printer.f59b0ee.svg", "purchase": "purchase.9cd6d65.svg", "push-pin": "push-pin.89e4ead.svg", "push-pin-off": "push-pin-off.ba99213.svg", "qr": "qr.87a49a3.svg", "qr-off": "qr-off.64e21b9.svg", "question": "question.3402a63.svg", "question-filled": "question-filled.cf25dd5.svg", "racing-flag": "racing-flag.b7ddcc8.svg", "radar": "radar.de5a6c1.svg", "radio": "radio.2b48e53.svg", "refresh": "refresh.41fd868.svg", "replay": "replay.55a99f2.svg", "reset": "reset.e53d52f.svg", "return": "return.46d30de.svg", "road": "road.bd3d4bc.svg", "roof-closed": "roof-closed.018d021.svg", "roof-open": "roof-open.51c8ee6.svg", "route": "route.f4fbbb4.svg", "rss": "rss.0e77baf.svg", "save": "save.6171ff5.svg", "screen": "screen.420be15.svg", "search": "search.3f0f1ce.svg", "seat": "seat.a3ebc40.svg", "send": "send.b32099c.svg", "service-technician": "service-technician.8749028.svg", "share": "share.a0b30da.svg", "shopping-bag": "shopping-bag.3f91a9b.svg", "shopping-bag-filled": "shopping-bag-filled.abf6c98.svg", "shopping-cart": "shopping-cart.370e224.svg", "shopping-cart-filled": "shopping-cart-filled.e0c3a65.svg", "sidebar": "sidebar.8e43896.svg", "sidelights": "sidelights.65c9dd9.svg", "skip-backward": "skip-backward.cd25ac5.svg", "skip-forward": "skip-forward.001e97f.svg", "snowflake": "snowflake.83907b3.svg", "sort": "sort.92b50bd.svg", "stack": "stack.804af93.svg", "star": "star.4c5bb15.svg", "star-filled": "star-filled.84ef2f6.svg", "steering-wheel": "steering-wheel.4dea19e.svg", "stop": "stop.173b6ac.svg", "stopwatch": "stopwatch.0e048a4.svg", "subtract": "subtract.57eed1d.svg", "success": "success.b16d4c1.svg", "success-filled": "success-filled.1832d98.svg", "sun": "sun.4301cbd.svg", "suv": "suv.33ac4aa.svg", "switch": "switch.66f74c4.svg", "tablet": "tablet.07341ac.svg", "tachometer": "tachometer.3a2fc3c.svg", "theme": "theme.08f6508.svg", "tire": "tire.e5c9372.svg", "trigger-finger": "trigger-finger.65aa6e2.svg", "truck": "truck.2c26c04.svg", "turismo": "turismo.a066b9f.svg", "unlinked": "unlinked.e9afe39.svg", "upload": "upload.d1f5a2a.svg", "user": "user.c18dabe.svg", "user-filled": "user-filled.2ea646d.svg", "user-group": "user-group.79cdf86.svg", "user-manual": "user-manual.470e243.svg", "video": "video.7590689.svg", "view": "view.5b4d7f6.svg", "view-off": "view-off.a4ede54.svg", "volume-off": "volume-off.bcd49e7.svg", "volume-up": "volume-up.2084f60.svg", "warning": "warning.59927e6.svg", "warning-filled": "warning-filled.1f6fe21.svg", "weather": "weather.9c96bd7.svg", "weight": "weight.b57a60d.svg", "wifi": "wifi.e2a8d9c.svg", "work": "work.9dd71a4.svg", "wrench": "wrench.09a2a67.svg", "wrenches": "wrenches.d2ed45d.svg", "zoom-in": "zoom-in.ff299b8.svg", "zoom-out": "zoom-out.ebb6246.svg" };
 
 // index.ts
 var MARQUES_MANIFEST = { "porscheMarqueTrademark": { "medium": { "1x": { "png": "porsche-marque-trademark.medium.da07531@1x.png", "webp": "porsche-marque-trademark.medium.5c6af9a@1x.webp" }, "2x": { "png": "porsche-marque-trademark.medium.aa801f4@2x.png", "webp": "porsche-marque-trademark.medium.fff6e9b@2x.webp" }, "3x": { "png": "porsche-marque-trademark.medium.824818d@3x.png", "webp": "porsche-marque-trademark.medium.f67092f@3x.webp" } }, "small": { "1x": { "png": "porsche-marque-trademark.small.020244b@1x.png", "webp": "porsche-marque-trademark.small.7836397@1x.webp" }, "2x": { "png": "porsche-marque-trademark.small.92184fa@2x.png", "webp": "porsche-marque-trademark.small.760a57e@2x.webp" }, "3x": { "png": "porsche-marque-trademark.small.fd545ce@3x.png", "webp": "porsche-marque-trademark.small.1726036@3x.webp" } } }, "porscheMarque": { "medium": { "1x": { "png": "porsche-marque.medium.a986274@1x.png", "webp": "porsche-marque.medium.fa908e4@1x.webp" }, "2x": { "png": "porsche-marque.medium.089d6dd@2x.png", "webp": "porsche-marque.medium.7f0893d@2x.webp" }, "3x": { "png": "porsche-marque.medium.2cb8743@3x.png", "webp": "porsche-marque.medium.3534cf0@3x.webp" } }, "small": { "1x": { "png": "porsche-marque.small.ac20427@1x.png", "webp": "porsche-marque.small.005debe@1x.webp" }, "2x": { "png": "porsche-marque.small.22f1e9d@2x.png", "webp": "porsche-marque.small.df43173@2x.webp" }, "3x": { "png": "porsche-marque.small.4920924@3x.png", "webp": "porsche-marque.small.cfd6149@3x.webp" } } }, "porscheMarque75": { "medium": { "1x": { "png": "porsche-marque75.medium.0a02e22@1x.png", "webp": "porsche-marque75.medium.99b2d65@1x.webp" }, "2x": { "png": "porsche-marque75.medium.1d41ecf@2x.png", "webp": "porsche-marque75.medium.e32580c@2x.webp" }, "3x": { "png": "porsche-marque75.medium.373bcb5@3x.png", "webp": "porsche-marque75.medium.4a003d1@3x.webp" } }, "small": { "1x": { "png": "porsche-marque75.small.f5b37fe@1x.png", "webp": "porsche-marque75.small.146b06c@1x.webp" }, "2x": { "png": "porsche-marque75.small.20d8690@2x.png", "webp": "porsche-marque75.small.025770f@2x.webp" }, "3x": { "png": "porsche-marque75.small.e89b13e@3x.png", "webp": "porsche-marque75.small.a725d2e@3x.webp" } } } };

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

@@ -7,21 +7,21 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 var select = require('../dsr-components/select.cjs');
 
-const PSelect = /*#__PURE__*/ react.forwardRef(({ description = '', disabled = false, dropdownDirection = 'auto', form, hideLabel = false, label = '', message = '', name, onUpdate, required = false, state = 'none', theme, value, className, children, ...rest }, ref) => {
+const PSelect = /*#__PURE__*/ react.forwardRef(({ compact = false, description = '', disabled = false, dropdownDirection = 'auto', form, hideLabel = false, label = '', message = '', name, onUpdate, required = false, state = 'none', theme, value, className, children, ...rest }, ref) => {
     const elementRef = react.useRef(undefined);
     hooks.useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = hooks.usePrefix('p-select');
-    const propsToSync = [description, disabled, dropdownDirection, form, hideLabel, label, message, name, required, state, theme || hooks.useTheme(), value];
+    const propsToSync = [compact, description, disabled, dropdownDirection, form, hideLabel, label, message, name, required, state, theme || hooks.useTheme(), value];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['description', 'disabled', 'dropdownDirection', 'form', 'hideLabel', 'label', 'message', 'name', 'required', 'state', 'theme', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['compact', 'description', 'disabled', 'dropdownDirection', 'form', 'hideLabel', 'label', 'message', 'name', 'required', 'state', 'theme', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsxRuntime.jsx(select.DSRSelect, { description, disabled, dropdownDirection, form, hideLabel, label, message, name, required, state, theme: theme || hooks.useTheme(), value, children })),
+                children: (jsxRuntime.jsx(select.DSRSelect, { compact, description, disabled, dropdownDirection, form, hideLabel, label, message, name, required, state, theme: theme || hooks.useTheme(), value, children })),
             }
             : {
                 children,

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

@@ -7,22 +7,22 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 var _switch = require('../dsr-components/switch.cjs');
 
-const PSwitch = /*#__PURE__*/ react.forwardRef(({ alignLabel = 'end', checked = false, disabled = false, hideLabel = false, loading = false, onSwitchChange, onUpdate, stretch = false, theme, className, children, ...rest }, ref) => {
+const PSwitch = /*#__PURE__*/ react.forwardRef(({ alignLabel = 'end', checked = false, compact = false, disabled = false, hideLabel = false, loading = false, onSwitchChange, onUpdate, stretch = false, theme, className, children, ...rest }, ref) => {
     const elementRef = react.useRef(undefined);
     hooks.useEventCallback(elementRef, 'switchChange', onSwitchChange);
     hooks.useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = hooks.usePrefix('p-switch');
-    const propsToSync = [alignLabel, checked, disabled, hideLabel, loading, stretch, theme || hooks.useTheme()];
+    const propsToSync = [alignLabel, checked, compact, disabled, hideLabel, loading, stretch, theme || hooks.useTheme()];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['alignLabel', 'checked', 'disabled', 'hideLabel', 'loading', 'stretch', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['alignLabel', 'checked', 'compact', 'disabled', 'hideLabel', 'loading', 'stretch', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsxRuntime.jsx(_switch.DSRSwitch, { alignLabel, checked, disabled, hideLabel, loading, stretch, theme: theme || hooks.useTheme(), children })),
+                children: (jsxRuntime.jsx(_switch.DSRSwitch, { alignLabel, checked, compact, disabled, hideLabel, loading, stretch, theme: theme || hooks.useTheme(), children })),
             }
             : {
                 children,

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

@@ -20,6 +20,7 @@ var wordmark_wrapper = require('../components/wordmark.wrapper.cjs');
  * @slot {"name": "footer", "description": "Renders a **sticky** footer section underneath the main content." }
  * @slot {"name": "sidebar-start", "description": "Renders 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": "Renders a sidebar area on the **end** side (**right** in **LTR** mode / **left** in **RTL** mode). On mobile view it transforms into a flyout." }
+ * @slot {"name": "sidebar-end-header", "description": "Renders in the header section of the sidebar end area." }
  * @slot {"name": "background", "description": "Can be used to pass a sticky media element <img/> or <video/> placed underneath the main content." }
  *
  * @experimental
@@ -30,6 +31,7 @@ class DSRCanvas extends react.Component {
     isMediaQueryM = false;
     hasTitle;
     hasSidebarEnd;
+    hasSidebarEndHeader;
     hasFooter;
     hasBackground;
     sidebarStart;
@@ -40,10 +42,11 @@ class DSRCanvas extends react.Component {
         const { children, namedSlotChildren, otherChildren } = splitChildren.splitChildren(this.props.children);
         const hasTitle = namedSlotChildren.filter(({ props: { slot } }) => slot === 'title').length > 0;
         const hasSidebarEnd = namedSlotChildren.filter(({ props: { slot } }) => slot === 'sidebar-end').length > 0;
+        const hasSidebarEndHeader = namedSlotChildren.filter(({ props: { slot } }) => slot === 'sidebar-end-header').length > 0;
         const hasFooter = namedSlotChildren.filter(({ props: { slot } }) => slot === 'footer').length > 0;
         const hasBackground = namedSlotChildren.filter(({ props: { slot } }) => slot === 'background').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: "root", children: [jsxRuntime.jsxs("header", { className: "header", tabIndex: -1, children: [jsxRuntime.jsxs("div", { className: "blur", children: [jsxRuntime.jsx("div", {}), jsxRuntime.jsx("div", {}), jsxRuntime.jsx("div", {}), jsxRuntime.jsx("div", {}), jsxRuntime.jsx("div", {}), jsxRuntime.jsx("div", {}), jsxRuntime.jsx("div", {}), jsxRuntime.jsx("div", {})] }), jsxRuntime.jsxs("div", { className: "header__area header__area--start", children: [!this.props.sidebarStartOpen && (jsxRuntime.jsxs(button_wrapper.PButton, { theme: this.props.theme, icon: "sidebar", variant: "ghost", compact: true, "hide-label": "true", aria: { 'aria-expanded': this.props.sidebarStartOpen }, children: [this.props.sidebarStartOpen ? 'Close' : 'Open', " navigation sidebar"] })), jsxRuntime.jsx("slot", { name: "header-start" })] }), jsxRuntime.jsx(crest_wrapper.PCrest, { className: "header__crest" }), jsxRuntime.jsx(wordmark_wrapper.PWordmark, { className: "header__wordmark", size: "inherit", theme: this.props.theme }), jsxRuntime.jsx("div", { className: "header__area header__area--end", children: jsxRuntime.jsx("slot", { name: "header-end" }) })] }), this.props.isMediaQueryS && (jsxRuntime.jsx("aside", { className: "sidebar sidebar--start", inert: !this.props.sidebarStartOpen, "aria-label": `Navigation sidebar ${this.props.sidebarStartOpen ? 'open' : 'closed'}`, tabIndex: -1, children: jsxRuntime.jsxs("div", { className: "sidebar__scroller", children: [jsxRuntime.jsxs("div", { className: "sidebar__header sidebar__header--start", children: [jsxRuntime.jsxs(button_wrapper.PButton, { theme: this.props.theme, icon: "sidebar", variant: "ghost", compact: true, "hide-label": "true", aria: { 'aria-expanded': this.props.sidebarStartOpen }, children: [this.props.sidebarStartOpen ? 'Close' : 'Open', " navigation sidebar"] }), hasTitle && (jsxRuntime.jsx("h2", { children: jsxRuntime.jsx("slot", { name: "title" }) }))] }), jsxRuntime.jsx("div", { className: "sidebar__content", children: jsxRuntime.jsx("slot", { name: "sidebar-start" }) })] }) })), jsxRuntime.jsx("main", { className: "main", children: jsxRuntime.jsx("slot", {}) }), hasSidebarEnd && this.props.isMediaQueryM && (jsxRuntime.jsx("aside", { className: "sidebar sidebar--end", inert: !this.props.sidebarEndOpen, "aria-label": `Settings sidebar ${this.props.sidebarEndOpen ? 'open' : 'closed'}`, tabIndex: -1, children: jsxRuntime.jsxs("div", { className: "sidebar__scroller", children: [jsxRuntime.jsx("div", { className: "sidebar__header sidebar__header--end", children: jsxRuntime.jsxs(button_wrapper.PButton, { theme: this.props.theme, icon: "close", variant: "ghost", compact: true, "hide-label": "true", aria: { 'aria-expanded': this.props.sidebarEndOpen }, children: [this.props.sidebarEndOpen ? 'Close' : 'Open', " settings sidebar"] }) }), jsxRuntime.jsx("div", { className: "sidebar__content", children: jsxRuntime.jsx("slot", { name: "sidebar-end" }) })] }) })), hasFooter && (jsxRuntime.jsx("footer", { className: "footer", children: jsxRuntime.jsx("slot", { name: "footer" }) })), hasBackground && jsxRuntime.jsx("slot", { name: "background" })] }), !this.props.isMediaQueryS && (jsxRuntime.jsxs(flyout_wrapper.PFlyout, { className: "flyout-start", theme: this.props.theme, open: this.props.sidebarStartOpen, position: "start", children: [hasTitle && (jsxRuntime.jsx("h2", { slot: "header", children: jsxRuntime.jsx("slot", { name: "title" }) })), jsxRuntime.jsx("slot", { name: "sidebar-start" })] })), hasSidebarEnd && !this.props.isMediaQueryM && (jsxRuntime.jsx(flyout_wrapper.PFlyout, { className: "flyout-end", theme: this.props.theme, open: this.props.sidebarEndOpen, position: "end", children: jsxRuntime.jsx("slot", { name: "sidebar-end" }) }))] })] }), this.props.children] }));
+        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: "root", children: [jsxRuntime.jsxs("header", { className: "header", tabIndex: -1, children: [jsxRuntime.jsxs("div", { className: "blur", children: [jsxRuntime.jsx("div", {}), jsxRuntime.jsx("div", {}), jsxRuntime.jsx("div", {}), jsxRuntime.jsx("div", {}), jsxRuntime.jsx("div", {}), jsxRuntime.jsx("div", {}), jsxRuntime.jsx("div", {}), jsxRuntime.jsx("div", {})] }), jsxRuntime.jsxs("div", { className: "header__area header__area--start", children: [!this.props.sidebarStartOpen && (jsxRuntime.jsxs(button_wrapper.PButton, { theme: this.props.theme, icon: "sidebar", variant: "ghost", compact: true, "hide-label": "true", aria: { 'aria-expanded': this.props.sidebarStartOpen }, children: [this.props.sidebarStartOpen ? 'Close' : 'Open', " navigation sidebar"] })), jsxRuntime.jsx("slot", { name: "header-start" })] }), jsxRuntime.jsx(crest_wrapper.PCrest, { className: "header__crest" }), jsxRuntime.jsx(wordmark_wrapper.PWordmark, { className: "header__wordmark", size: "inherit", theme: this.props.theme }), jsxRuntime.jsx("div", { className: "header__area header__area--end", children: jsxRuntime.jsx("slot", { name: "header-end" }) })] }), this.props.isMediaQueryS && (jsxRuntime.jsx("aside", { className: "sidebar sidebar--start", inert: !this.props.sidebarStartOpen, "aria-label": `Navigation sidebar ${this.props.sidebarStartOpen ? 'open' : 'closed'}`, tabIndex: -1, children: jsxRuntime.jsxs("div", { className: "sidebar__scroller", children: [jsxRuntime.jsxs("div", { className: "sidebar__header sidebar__header--start", children: [jsxRuntime.jsxs(button_wrapper.PButton, { theme: this.props.theme, icon: "sidebar", variant: "ghost", compact: true, "hide-label": "true", aria: { 'aria-expanded': this.props.sidebarStartOpen }, children: [this.props.sidebarStartOpen ? 'Close' : 'Open', " navigation sidebar"] }), hasTitle && (jsxRuntime.jsx("h2", { children: jsxRuntime.jsx("slot", { name: "title" }) }))] }), jsxRuntime.jsx("div", { className: "sidebar__content", children: jsxRuntime.jsx("slot", { name: "sidebar-start" }) })] }) })), jsxRuntime.jsx("main", { className: "main", children: jsxRuntime.jsx("slot", {}) }), hasSidebarEnd && this.props.isMediaQueryM && (jsxRuntime.jsx("aside", { className: "sidebar sidebar--end", inert: !this.props.sidebarEndOpen, "aria-label": `Settings sidebar ${this.props.sidebarEndOpen ? 'open' : 'closed'}`, tabIndex: -1, children: jsxRuntime.jsxs("div", { className: "sidebar__scroller", children: [jsxRuntime.jsxs("div", { className: "sidebar__header sidebar__header--end", children: [jsxRuntime.jsx("slot", { name: "sidebar-end-header" }), jsxRuntime.jsxs(button_wrapper.PButton, { theme: this.props.theme, icon: "close", variant: "ghost", compact: true, "hide-label": "true", aria: { 'aria-expanded': this.props.sidebarEndOpen }, children: [this.props.sidebarEndOpen ? 'Close' : 'Open', " settings sidebar"] })] }), jsxRuntime.jsx("div", { className: "sidebar__content", children: jsxRuntime.jsx("slot", { name: "sidebar-end" }) })] }) })), hasFooter && (jsxRuntime.jsx("footer", { className: "footer", children: jsxRuntime.jsx("slot", { name: "footer" }) })), hasBackground && jsxRuntime.jsx("slot", { name: "background" })] }), !this.props.isMediaQueryS && (jsxRuntime.jsxs(flyout_wrapper.PFlyout, { className: "flyout-start", theme: this.props.theme, open: this.props.sidebarStartOpen, position: "start", children: [hasTitle && (jsxRuntime.jsx("h2", { slot: "header", children: jsxRuntime.jsx("slot", { name: "title" }) })), jsxRuntime.jsx("slot", { name: "sidebar-start" })] })), hasSidebarEnd && !this.props.isMediaQueryM && (jsxRuntime.jsxs(flyout_wrapper.PFlyout, { className: "flyout-end", theme: this.props.theme, open: this.props.sidebarEndOpen, position: "end", children: [hasSidebarEndHeader && jsxRuntime.jsx("slot", { slot: "header", name: "sidebar-end-header" }), jsxRuntime.jsx("slot", { name: "sidebar-end" })] }))] })] }), this.props.children] }));
     }
 }
 

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

@@ -55,7 +55,7 @@ class DSRSelect extends react.Component {
         const selectMessageId = (this.props.message || namedSlotChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(this.props.state) ? stateMessage.messageId : undefined;
         const initialStatusId = 'initial-status';
         const ariaDescribedBy = [descriptionId, selectMessageId, initialStatusId].filter(Boolean).join(' ');
-        const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getSelectCss('down', this.props.isOpen, this.props.disabled, this.props.hideLabel, this.props.state, this.props.isNativePopoverCase, this.props.theme, !!this.props.slottedImagePath)));
+        const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getSelectCss('down', this.props.isOpen, this.props.disabled, this.props.hideLabel, this.props.state, this.props.isNativePopoverCase, this.props.compact, this.props.theme, !!this.props.slottedImagePath)));
         return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs("div", { className: "root", children: [jsxRuntime.jsx(label.Label, { hasLabel: this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0, hasDescription: this.props.description || namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0, host: null, label: this.props.label, description: this.props.description, htmlFor: buttonId, isRequired: this.props.required, isDisabled: this.props.disabled }), jsxRuntime.jsxs("div", { className: `wrapper${this.props.disabled ? ' disabled' : ''}`, children: [jsxRuntime.jsx("button", { "aria-invalid": this.props.state === 'error' ? 'true' : null, type: "button", role: "combobox", id: buttonId, ...utilsEntry.getComboboxAriaAttributes(this.props.isOpen, this.props.required, label.labelId, ariaDescribedBy, dropdownId), disabled: this.props.disabled, children: this.props.slottedImagePath ? (jsxRuntime.jsxs("span", { children: [jsxRuntime.jsx("img", { src: this.props.slottedImagePath, alt: "" }), jsxRuntime.jsx("span", { children: utilsEntry.getSelectedOptionString(otherChildren) })] })) : (utilsEntry.getSelectedOptionString(otherChildren)) }), jsxRuntime.jsx(icon_wrapper.PIcon, { className: "icon", name: "arrow-head-down", theme: this.props.theme, color: this.props.disabled ? 'state-disabled' : 'primary', "aria-hidden": "true" }), jsxRuntime.jsx("div", { ...(this.props.isNativePopoverCase && {
                                                 popover: 'auto',
                                                 className: 'popover',