@porsche-design-system/components-react 4.7.0-beta.0 → 4.7.0

package/skills/pds-knowledge-react/references/styles/scss.md

@@ -93,8 +93,9 @@ reference below to discover what is available; read the shipped partials for the
 ### Deprecated aliases
 
 The package still ships the legacy `$pds-*` variables and `pds-*` mixins as deprecated aliases so
-existing stylesheets keep compiling. Prefer the documented variables and mixins listed here for new
-code.
+existing stylesheets keep compiling. Each is preceded by a `// @deprecated …` comment in the
+shipped partials naming its replacement, and the complete list is in the knowledge skill's
+`references/deprecations.md`. Prefer the documented variables and mixins listed here for new code.
 
 ## Contents
 

package/skills/pds-knowledge-react/references/styles/tailwindcss.md

@@ -85,8 +85,6 @@ valid when sections need independent grids.
 | Theme variable | Tailwind class(es) | Description | Value |
 | --- | --- | --- | --- |
 | `--default-border-width` | – | Default border width applied globally via the Tailwind `@theme` block. | `1px` |
-| `--border-width-regular` | – | Alias for the regular (2 px) border width. **Deprecated** — prefer `--default-border-width`. | `2px` |
-| `--border-width-thin` | – | Alias for the thin (1 px) border width. **Deprecated** — prefer `--default-border-width`. | `1px` |
 
 ### Blur
 

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

@@ -3509,37 +3509,37 @@ const isDisabledOrLoading = (disabled, loading) => {
 /** Holds the **Porsche Next** font family along with fallback fonts. */
 const fontPorscheNext = "'Porsche Next','Arial Narrow',Arial,'Heiti SC',SimHei,sans-serif";
 
-/** @deprecated since v4.0.0, will be removed with next major release. Use fontPorscheNext instead. */
+/** @deprecated Use {@link fontPorscheNext} instead. This API will be removed with the next major release. */
 const fontFamily = fontPorscheNext;
 
 /** Holds a dynamic default line height specifically optimized for the Porsche Next typeface. */
 const leadingNormal = 'calc(6px + 2.125ex)';
 
-/** @deprecated since v4.0.0, will be removed with next major release. Use leadingNormal instead */
+/** @deprecated Use {@link leadingNormal} instead. This API will be removed with the next major release. */
 const fontLineHeight = leadingNormal;
 
 /** Holds the **small** font size optimized for the Porsche Next typeface. */
 const typescaleSm = '1rem';
 
-/** @deprecated since v4.0.0, will be removed with next major release. Use typescaleSm instead. */
+/** @deprecated Use {@link typescaleSm} instead. This API will be removed with the next major release. */
 const fontSizeTextSmall = typescaleSm;
 
 /** Holds the **x-small** font size optimized for the Porsche Next typeface. */
 const typescaleXs = '.875rem';
 
-/** @deprecated since v4.0.0, will be removed with next major release. Use typescaleXs instead. */
+/** @deprecated Use {@link typescaleXs} instead. This API will be removed with the next major release. */
 const fontSizeTextXSmall = typescaleXs;
 
-/** @deprecated since v4.0.0, will be removed with next major release. Use 'normal' instead. */
+/** @deprecated This API will be removed with the next major release. Use 'normal' instead. */
 const fontStyleNormal = 'normal';
 
-/** @deprecated since v4.0.0, will be removed with next major release. Use 'normal' instead. */
+/** @deprecated This API will be removed with the next major release. Use 'normal' instead. */
 const fontVariant = 'normal';
 
 /** Holds the **normal** font weight optimized for the Porsche Next typeface. */
 const fontWeightNormal = 400;
 
-/** @deprecated since v4.0.0, will be removed with next major release. Use fontWeightNormal instead. */
+/** @deprecated Use {@link fontWeightNormal} instead. This API will be removed with the next major release. */
 const fontWeightRegular = fontWeightNormal;
 
 /** Holds a gradient fade. */
@@ -3560,12 +3560,12 @@ const gradientStopsFadeDark = 'hsla(0,0%,0%,.8) 0%,' +
     'hsla(0,0%,0%,.011) 91.9%,' +
     'hsla(0,0%,0%,0) 100%';
 
-/** @deprecated since v4.0.0, will be removed with next major release. Use background: `linear-gradient(to bottom, ${gradientStopsFadeDark});` instead  */
+/** @deprecated This API will be removed with the next major release. Use background: `linear-gradient(to bottom, ${gradientStopsFadeDark});` instead. */
 const gradientToBottomStyle = {
     background: `linear-gradient(to bottom, ${gradientStopsFadeDark});`,
 };
 
-/** @deprecated since v4.0.0, will be removed with next major release. background: `linear-gradient(to top, ${gradientStopsFadeDark});` instead  */
+/** @deprecated This API will be removed with the next major release. background: `linear-gradient(to top, ${gradientStopsFadeDark});` instead. */
 const gradientToTopStyle = {
     background: `linear-gradient(to top, ${gradientStopsFadeDark});`,
 };
@@ -3619,7 +3619,7 @@ function getMediaQueryMin(min) {
 /** Holds the **medium fluid** spacing. */
 const spacingFluidMd = 'clamp(16px, 1.25vw + 12px, 36px)';
 
-/** @deprecated since v4.0.0, will be removed with next major release. Use spacingFluidMd instead. */
+/** @deprecated Use {@link spacingFluidMd} instead. This API will be removed with the next major release. */
 const spacingFluidMedium = spacingFluidMd;
 
 const gridGap = spacingFluidMedium;
@@ -3688,35 +3688,35 @@ function getMediaQueryMax(max) {
 /** Holds a **moderate** motion/transition duration value. */
 const durationMd = '.4s';
 
-/** @deprecated since v4.0.0, will be removed with next major release. Use durationMd instead. */
+/** @deprecated Use {@link durationMd} instead. This API will be removed with the next major release. */
 const motionDurationModerate = durationMd;
 
 /** Holds an **in** `transition-timing-function`. */
 const easeIn = 'cubic-bezier(0,0,.2,1)';
 
-/** @deprecated since v4.0.0, will be removed with next major release. Use easeIn instead. */
+/** @deprecated Use {@link easeIn} instead. This API will be removed with the next major release. */
 const motionEasingIn = easeIn;
 
 /** Holds an **out** `transition-timing-function`. */
 const easeOut = 'cubic-bezier(.4,0,.5,1)';
 
-/** @deprecated since v4.0.0, will be removed with next major release. Use easeOut instead. */
+/** @deprecated Use {@link easeOut} instead. This API will be removed with the next major release. */
 const motionEasingOut = easeOut;
 
 const _textFontPartA = `${fontStyleNormal} ${fontVariant} ${fontWeightRegular} `;
 const _textFontPartB = `/${fontLineHeight} ${fontFamily}`;
 
-/** @deprecated since v4.0.0, will be removed with next major release. Use proseTextXs instead. */
+/** @deprecated Use {@link proseTextXsStyle} instead. This API will be removed with the next major release. */
 const textXSmallStyle = {
     font: `${_textFontPartA}${fontSizeTextXSmall}${_textFontPartB}`,
 };
 
-/** @deprecated since v4.0.0, will be removed with next major release. Use proseTextSm instead. */
+/** @deprecated Use {@link proseTextSmStyle} instead. This API will be removed with the next major release. */
 const textSmallStyle = {
     font: `${_textFontPartA}${fontSizeTextSmall}${_textFontPartB}`,
 };
 
-const parseJSON = (prop) => {
+const parse = (prop) => {
     if (typeof prop === 'string') {
         try {
             // prop is potentially JSON parsable string, e.g. "{ base: 'block', l: 'inline' }" or "true" or "false"
@@ -3735,6 +3735,20 @@ const parseJSON = (prop) => {
         return prop;
     }
 };
+// boolean props have to be parsed via parseJSONBoolean(), therefore the parameter type excludes them to make it
+// impossible to lose the HTML boolean attribute shorthand by accident
+const parseJSON = (prop) => parse(prop);
+const parseJSONBoolean = (prop) => 
+// prop is an HTML boolean attribute used without a value, e.g. <p-input-text hide-label>
+// Stencil resolves BreakpointCustomizable<T> to "any" and therefore skips its own boolean coercion
+// TODO: [v5] obsolete once objects can only be set via property, since Stencil coerces booleans itself then, see #4708
+(prop === '' ? true : parse(prop));
+// a BreakpointCustomizable value can be true for certain breakpoints only, e.g. { base: false, l: true },
+// therefore styles which are needed as soon as it is true anywhere have to be determined like this
+const isTruthyForAnyBreakpoint = (prop) => {
+    const value = parseJSONBoolean(prop);
+    return typeof value === 'object' ? Object.values(value).some(Boolean) : !!value;
+};
 
 // NOTE: handpicked selection of plugins from jss-preset-default
 const jss = createJss({
@@ -3760,8 +3774,7 @@ const supportsConstructableStylesheets = () => {
 };
 // determine it once
 supportsConstructableStylesheets();
-const buildResponsiveStyles = (rawValue, getJssStyle) => {
-    const value = parseJSON(rawValue);
+const buildStyles = (value, getJssStyle) => {
     return typeof value === 'object'
         ? Object.keys(value)
             // base styles are applied on root object, responsive styles are nested within
@@ -3773,6 +3786,11 @@ const buildResponsiveStyles = (rawValue, getJssStyle) => {
         }), getJssStyle(value.base))
         : getJssStyle(value);
 };
+// boolean props have to use buildResponsiveBooleanStyles(), therefore the generic excludes them to make it impossible
+// to lose the HTML boolean attribute shorthand by accident
+const buildResponsiveStyles = (rawValue, getJssStyle) => buildStyles(parseJSON(rawValue), getJssStyle);
+// TODO: [v5] can be merged back into buildResponsiveStyles() once objects can only be set via property, see #4708
+const buildResponsiveBooleanStyles = (rawValue, getJssStyle) => buildStyles(parseJSONBoolean(rawValue), getJssStyle);
 const isObject = (obj) => typeof obj === 'object' && !Array.isArray(obj);
 // NOTE: taken from https://stackoverflow.com/a/48218209
 const mergeDeep = (...objects) => {
@@ -3849,7 +3867,7 @@ const OPTION_LIST_SAFE_ZONE = 6;
 
 const getCDNBaseURL = () => global.PORSCHE_DESIGN_SYSTEM_CDN_URL + "/porsche-design-system";
 
-const prefix = `[Porsche Design System v${"4.7.0-beta.0"}]` // this part isn't covered by unit tests
+const prefix = `[Porsche Design System v${"4.7.0"}]` // this part isn't covered by unit tests
     ;
 const consoleError = (...messages) => {
     console.error(prefix, ...messages);
@@ -4087,7 +4105,7 @@ const getComponentCss$1a = (alignMarker, background, isCompact, indent, isOpen,
                 }),
                 '& > div': {
                     gridArea: '2/1/auto/-1',
-                    ...buildResponsiveStyles(indent, (isIndented) => ({
+                    ...buildResponsiveBooleanStyles(indent, (isIndented) => ({
                         gridColumnStart: isIndented ? summaryColumnStart : 1,
                     })),
                     zIndex: 0, // ensures stacking to be below the summary section
@@ -4741,7 +4759,7 @@ const getLinkButtonPureStyles = (icon, iconSource, active, isDisabledOrLoading,
                     transform: 'translate3d(0,0,0)', // creates new stacking context
                     ...hostHiddenStyles,
                 }),
-                ...buildResponsiveStyles(stretch, (responsiveStretch) => ({
+                ...buildResponsiveBooleanStyles(stretch, (responsiveStretch) => ({
                     display: responsiveStretch ? 'block' : 'inline-block',
                     width: responsiveStretch ? '100%' : 'auto', // prevents adjusting its size when used as flex or grid child
                     ...(!responsiveStretch && { verticalAlign: 'top' }),
@@ -4757,9 +4775,9 @@ const getLinkButtonPureStyles = (icon, iconSource, active, isDisabledOrLoading,
             color: colorMap$3[color],
             textDecoration: underline ? 'underline' : 'none',
             font: `${ref(fontWeightNormal$1)} ${ref(typescaleSm$1)}/${ref(leadingNormal$1)} ${ref(fontPorscheNext$1)}`,
-            ...mergeDeep(buildResponsiveStyles(hideLabel, (hidelabelValue) => ({
+            ...mergeDeep(buildResponsiveBooleanStyles(hideLabel, (hidelabelValue) => ({
                 gap: hidelabelValue ? 0 : ref(spacingStaticXs$1),
-            })), buildResponsiveStyles(stretch, (stretchValue) => ({
+            })), buildResponsiveBooleanStyles(stretch, (stretchValue) => ({
                 justifyContent: stretchValue ? 'space-between' : 'flex-start',
                 alignItems: stretchValue ? 'center' : 'flex-start',
             })), buildResponsiveStyles(size, (v) => ({
@@ -4776,7 +4794,7 @@ const getLinkButtonPureStyles = (icon, iconSource, active, isDisabledOrLoading,
                 position: 'absolute', // mobile Safari -> prevent lagging active state
                 top: offsetVertical,
                 bottom: offsetVertical,
-                ...buildResponsiveStyles(hideLabel, (hideLabelValue) => ({
+                ...buildResponsiveBooleanStyles(hideLabel, (hideLabelValue) => ({
                     right: hideLabelValue ? offsetVertical : offsetHorizontal,
                     left: hideLabelValue ? offsetVertical : offsetHorizontal,
                     borderRadius: hideLabelValue ? ref(radiusFull) : ref(radiusLg),
@@ -4807,7 +4825,7 @@ const getLinkButtonPureStyles = (icon, iconSource, active, isDisabledOrLoading,
                     flexShrink: '0',
                 },
                 label: mergeDeep({ zIndex: '1' }, // fix Firefox bug on :hover (#2583) & pure-link with nested anchor & hidden label (#3349)
-                buildResponsiveStyles(hideLabel, getVisibilityJssStyle), buildResponsiveStyles(alignLabel, (alignLabelValue) => ({
+                buildResponsiveBooleanStyles(hideLabel, getVisibilityJssStyle), buildResponsiveStyles(alignLabel, (alignLabelValue) => ({
                     order: alignLabelValue === 'start' ? -1 : 0,
                 }))),
             }
@@ -4963,7 +4981,7 @@ const getComponentCss$16 = (isDisabledOrLoading, aspectRatio, size, weight, alig
         },
         footer: {
             gridArea: `${isTopAligned ? 2 : 4}/2`,
-            ...buildResponsiveStyles(compact, (compactValue) => compactValue
+            ...buildResponsiveBooleanStyles(compact, (compactValue) => compactValue
                 ? {
                     display: 'grid',
                     gridTemplateColumns: 'minmax(0,1fr) auto',
@@ -4980,7 +4998,7 @@ const getComponentCss$16 = (isDisabledOrLoading, aspectRatio, size, weight, alig
             gridColumn: 2,
             gridRow: `1/${hasFooterSlot ? 3 : 2}`,
             alignSelf: isTopAligned ? 'flex-start' : 'flex-end',
-            ...buildResponsiveStyles(compact, (compactValue) => ({
+            ...buildResponsiveBooleanStyles(compact, (compactValue) => ({
                 display: compactValue ? 'inline-block' : 'none',
             })),
         },
@@ -4988,7 +5006,7 @@ const getComponentCss$16 = (isDisabledOrLoading, aspectRatio, size, weight, alig
             minHeight: '54px', // prevent content shift
             zIndex: 5,
             marginTop: ref(spacingStaticMd),
-            ...buildResponsiveStyles(compact, (compactValue) => ({
+            ...buildResponsiveBooleanStyles(compact, (compactValue) => ({
                 display: compactValue ? 'none' : 'inline-block',
             })),
         },
@@ -5020,7 +5038,7 @@ const getVariantColors = (variant, cssVariableBackground, cssVariableForeground)
 };
 const getLinkButtonStyles = (icon, iconSource, variant, hideLabel, isDisabledOrLoading, hasSlottedAnchor, isCompact, cssVariableInternalScaling, cssVariableBackground, cssVariableForeground, cssVarPaddingInline, cssVarPaddingBlock, cssVarGap, cssVarRadius) => {
     const { textColor, textColorHover, backgroundColor, backgroundColorHover } = getVariantColors(variant, cssVariableBackground, cssVariableForeground);
-    const hasIcon = hasVisibleIcon(icon, iconSource) || hideLabel;
+    const hasIcon = hasVisibleIcon(icon, iconSource) || isTruthyForAnyBreakpoint(hideLabel);
     const paddingBlock = `calc(28px * (${ref(cssVariableInternalScaling)} - 0.64285714) + 6px)`;
     const paddingInline = `calc(33.6px * (${ref(cssVariableInternalScaling)} - 0.64285714) + 16px)`;
     const gap = `calc(11.2px * (${ref(cssVariableInternalScaling)} - 0.64285714) + 4px)`;
@@ -5030,10 +5048,10 @@ const getLinkButtonStyles = (icon, iconSource, variant, hideLabel, isDisabledOrL
             ':host': {
                 display: 'inline-block',
                 verticalAlign: 'top',
-                ...mergeDeep(buildResponsiveStyles(isCompact, (compactValue) => ({
+                ...mergeDeep(buildResponsiveBooleanStyles(isCompact, (compactValue) => ({
                     [`${cssVariableInternalScaling}`]: compactValue ? 0.64285714 : 1,
                     '--_p-link-button-a': compactValue ? ref(radiusLg) : ref(radiusXl),
-                })), buildResponsiveStyles(hideLabel, (hideLabelValue) => ({
+                })), buildResponsiveBooleanStyles(hideLabel, (hideLabelValue) => ({
                     borderRadius: addImportantToRule(ref(cssVarRadius, hideLabelValue ? ref(radiusFull) : ref('--_p-link-button-a'))),
                 }))),
                 ...addImportantToEachRule({
@@ -5058,7 +5076,7 @@ const getLinkButtonStyles = (icon, iconSource, variant, hideLabel, isDisabledOrL
             color: textColor,
             cursor: 'pointer',
             transition: `${getTransition('background-color')}, ${getTransition('border-color')}, ${getTransition('color')}`,
-            ...buildResponsiveStyles(hideLabel, (hideLabelValue) => ({
+            ...buildResponsiveBooleanStyles(hideLabel, (hideLabelValue) => ({
                 padding: `${ref(cssVarPaddingBlock, paddingBlock)} ${ref(cssVarPaddingInline, hideLabelValue ? paddingBlock : paddingInline)}`,
                 gap: ref(cssVarGap, hideLabelValue ? 0 : gap),
             })),
@@ -5086,13 +5104,13 @@ const getLinkButtonStyles = (icon, iconSource, variant, hideLabel, isDisabledOrL
                     },
                 })),
         },
-        label: buildResponsiveStyles(hideLabel, getHiddenTextJssStyle),
+        label: buildResponsiveBooleanStyles(hideLabel, getHiddenTextJssStyle),
         ...(hasIcon && {
             icon: {
                 font: `${ref(typescaleSm$1)} ${ref(fontPorscheNext$1)}`, // needed for correct width/height definition based on ex-unit
                 width: ref(leadingNormal$1), // ensure space is already reserved until icon component is loaded (ssr)
                 height: ref(leadingNormal$1), // ensure space is already reserved until icon component is loaded (ssr)
-                ...buildResponsiveStyles(hideLabel, (hideLabelValue) => ({
+                ...buildResponsiveBooleanStyles(hideLabel, (hideLabelValue) => ({
                     marginInlineStart: hideLabelValue ? 0 : iconMarginInlineStart, // compensate white space of svg icon and optimize visual alignment
                 })),
             },
@@ -5717,7 +5735,7 @@ const getComponentCss$13 = (gradient, hasHeading, hasDescription, hasControlsSlo
         },
         ...(hasPagination && {
             'pagination-container': {
-                ...buildResponsiveStyles(hasPagination, (hasPaginationValue) => ({
+                ...buildResponsiveBooleanStyles(hasPagination, (hasPaginationValue) => ({
                     display: hasPaginationValue ? 'flex' : 'none',
                 })),
                 position: 'relative',
@@ -5990,7 +6008,7 @@ const getFunctionalComponentLabelStyles = (isDisabled, isLoading, hideLabel, add
     const isDisabledOrLoading = isDisabled || isLoading;
     return {
         'label-wrapper': {
-            ...buildResponsiveStyles(hideLabel, (isHidden) => ({
+            ...buildResponsiveBooleanStyles(hideLabel, (isHidden) => ({
                 ...(!isHidden && { minWidth: 'fit-content' }), // ensures label contents don't shrink to zero in grid containers
                 ...getHiddenTextJssStyle(isHidden, additionalIsShownJssStyle),
             })),
@@ -6016,7 +6034,7 @@ const getFunctionalComponentLabelStyles = (isDisabled, isLoading, hideLabel, add
                 cursor: 'unset',
                 fontSize: ref(typescaleXs$1),
                 color: ref(colorContrastHigh),
-                ...buildResponsiveStyles(hideLabel, (isHidden) => getHiddenTextJssStyle(isHidden, { marginTop: `calc(-1 * ${ref(spacingStaticXs$1)})` })),
+                ...buildResponsiveBooleanStyles(hideLabel, (isHidden) => getHiddenTextJssStyle(isHidden, { marginTop: `calc(-1 * ${ref(spacingStaticXs$1)})` })),
                 marginTop: `calc(-1 * ${ref(spacingStaticXs$1)})`,
             },
             '& > slot[name="label"]::slotted(*)': {
@@ -7432,7 +7450,7 @@ const getComponentCss$V = (isOpen, background, backdrop, position, hasHeader, ha
         flyout: {
             ...dialogGridJssStyle(),
             ...getDialogColorJssStyle(),
-            ...buildResponsiveStyles(fullscreen, (fullscreenValue) => fullscreenValue
+            ...buildResponsiveBooleanStyles(fullscreen, (fullscreenValue) => fullscreenValue
                 ? {
                     // fullscreen spans the whole viewport width, so corners are squared and corner clipping is disabled
                     width: '100dvw',
@@ -7888,7 +7906,7 @@ const getComponentCss$G = (icon, iconSource, active, stretch, size, color, hideL
                     content: '""',
                     position: 'fixed',
                     insetBlock: offsetVertical,
-                    ...buildResponsiveStyles(hideLabel, (hideLabelValue) => ({
+                    ...buildResponsiveBooleanStyles(hideLabel, (hideLabelValue) => ({
                         insetInline: hideLabelValue ? offsetVertical : offsetHorizontal,
                         borderRadius: hideLabelValue ? ref(radiusFull) : ref(radiusLg),
                     })),
@@ -8152,7 +8170,7 @@ const getComponentCss$E = (aspectRatio, size, weight, align, compact, hasGradien
         },
         footer: {
             gridArea: `${isTopAligned ? 2 : 4}/2`,
-            ...buildResponsiveStyles(compact, (compactValue) => compactValue
+            ...buildResponsiveBooleanStyles(compact, (compactValue) => compactValue
                 ? {
                     display: 'grid',
                     gridTemplateColumns: 'minmax(0,1fr) auto',
@@ -8169,7 +8187,7 @@ const getComponentCss$E = (aspectRatio, size, weight, align, compact, hasGradien
             gridColumn: 2,
             gridRow: `1/${hasFooterSlot ? 3 : 2}`,
             alignSelf: isTopAligned ? 'flex-start' : 'flex-end',
-            ...buildResponsiveStyles(compact, (compactValue) => ({
+            ...buildResponsiveBooleanStyles(compact, (compactValue) => ({
                 display: compactValue ? 'inline-block' : 'none',
             })),
         },
@@ -8177,7 +8195,7 @@ const getComponentCss$E = (aspectRatio, size, weight, align, compact, hasGradien
             minHeight: '54px', // prevent content shift
             zIndex: 5,
             marginTop: ref(spacingStaticMd),
-            ...buildResponsiveStyles(compact, (compactValue) => ({
+            ...buildResponsiveBooleanStyles(compact, (compactValue) => ({
                 display: compactValue ? 'none' : 'inline-block',
             })),
         },
@@ -8224,9 +8242,9 @@ const getComponentCss$D = (icon, iconSource, variant, hideLabel, hasSlottedAncho
                     content: '""',
                     position: 'fixed',
                     inset: 0,
-                    ...mergeDeep(buildResponsiveStyles(isCompact, (compactValue) => ({
+                    ...mergeDeep(buildResponsiveBooleanStyles(isCompact, (compactValue) => ({
                         borderRadius: ref(cssVarRadius$1, compactValue ? ref(radiusLg) : ref(radiusXl)),
-                    })), buildResponsiveStyles(hideLabel, (hideLabelValue) => ({
+                    })), buildResponsiveBooleanStyles(hideLabel, (hideLabelValue) => ({
                         ...(hideLabelValue && {
                             borderRadius: ref(cssVarRadius$1, ref(radiusFull)),
                         }),
@@ -8291,7 +8309,7 @@ const getComponentCss$C = (isOpen, background, backdrop, fullscreen, hasDismissB
             ...dialogGridJssStyle(),
             ...getDialogColorJssStyle(),
             ...getDialogTransitionJssStyle(isOpen, '^'),
-            ...buildResponsiveStyles(fullscreen, (fullscreenValue) => fullscreenValue
+            ...buildResponsiveBooleanStyles(fullscreen, (fullscreenValue) => fullscreenValue
                 ? {
                     width: 'auto',
                     minWidth: 'auto',
@@ -9767,7 +9785,7 @@ const getComponentCss$j = (alignLabel, hideLabel, isStretched, isChecked, isDisa
         '@global': {
             ':host': {
                 [`${cssVarInternalSwitchScaling}`]: isCompact ? 0.64285714 : 1,
-                ...buildResponsiveStyles(isStretched, (stretchValue) => ({
+                ...buildResponsiveBooleanStyles(isStretched, (stretchValue) => ({
                     display: stretchValue ? 'flex' : 'inline-flex',
                 })),
                 ...addImportantToEachRule({
@@ -9776,7 +9794,7 @@ const getComponentCss$j = (alignLabel, hideLabel, isStretched, isChecked, isDisa
                     font: `${ref(typescaleSm$1)} ${ref(fontPorscheNext$1)}`, // needed for correct gap definition based on ex-unit
                     gap,
                     ...hostHiddenStyles,
-                    ...buildResponsiveStyles(isStretched, (stretchValue) => ({
+                    ...buildResponsiveBooleanStyles(isStretched, (stretchValue) => ({
                         justifyContent: stretchValue ? 'space-between' : 'flex-start',
                         width: stretchValue ? '100%' : 'auto', // prevents adjusting its size when used as flex or grid child
                         ...(!stretchValue && { verticalAlign: 'top' }),
@@ -9831,7 +9849,7 @@ const getComponentCss$j = (alignLabel, hideLabel, isStretched, isChecked, isDisa
                     })),
                 ...mergeDeep(buildResponsiveStyles(alignLabel, (alignLabelValue) => ({
                     order: alignLabelValue === 'start' ? -1 : 0,
-                })), buildResponsiveStyles(hideLabel, (isHidden) => getHiddenTextJssStyle(isHidden, {
+                })), buildResponsiveBooleanStyles(hideLabel, (isHidden) => getHiddenTextJssStyle(isHidden, {
                     paddingTop: labelPaddingTop,
                 }))),
             },

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

@@ -3295,37 +3295,37 @@ const getListboxAriaAttributes = (isRequired, labelId, messageId, descriptionId,
 /** Holds the **Porsche Next** font family along with fallback fonts. */
 const fontPorscheNext = "'Porsche Next','Arial Narrow',Arial,'Heiti SC',SimHei,sans-serif";
 
-/** @deprecated since v4.0.0, will be removed with next major release. Use fontPorscheNext instead. */
+/** @deprecated Use {@link fontPorscheNext} instead. This API will be removed with the next major release. */
 const fontFamily = fontPorscheNext;
 
 /** Holds a dynamic default line height specifically optimized for the Porsche Next typeface. */
 const leadingNormal$1 = 'calc(6px + 2.125ex)';
 
-/** @deprecated since v4.0.0, will be removed with next major release. Use leadingNormal instead */
+/** @deprecated Use {@link leadingNormal} instead. This API will be removed with the next major release. */
 const fontLineHeight = leadingNormal$1;
 
 /** Holds the **small** font size optimized for the Porsche Next typeface. */
 const typescaleSm = '1rem';
 
-/** @deprecated since v4.0.0, will be removed with next major release. Use typescaleSm instead. */
+/** @deprecated Use {@link typescaleSm} instead. This API will be removed with the next major release. */
 const fontSizeTextSmall = typescaleSm;
 
 /** Holds the **x-small** font size optimized for the Porsche Next typeface. */
 const typescaleXs = '.875rem';
 
-/** @deprecated since v4.0.0, will be removed with next major release. Use typescaleXs instead. */
+/** @deprecated Use {@link typescaleXs} instead. This API will be removed with the next major release. */
 const fontSizeTextXSmall = typescaleXs;
 
-/** @deprecated since v4.0.0, will be removed with next major release. Use 'normal' instead. */
+/** @deprecated This API will be removed with the next major release. Use 'normal' instead. */
 const fontStyleNormal = 'normal';
 
-/** @deprecated since v4.0.0, will be removed with next major release. Use 'normal' instead. */
+/** @deprecated This API will be removed with the next major release. Use 'normal' instead. */
 const fontVariant = 'normal';
 
 /** Holds the **normal** font weight optimized for the Porsche Next typeface. */
 const fontWeightNormal = 400;
 
-/** @deprecated since v4.0.0, will be removed with next major release. Use fontWeightNormal instead. */
+/** @deprecated Use {@link fontWeightNormal} instead. This API will be removed with the next major release. */
 const fontWeightRegular = fontWeightNormal;
 
 const breakpointBase = 0;
@@ -3379,16 +3379,41 @@ const breakpoints = ['base', 'xs', 's', 'm', 'l', 'xl', 'xxl'];
 const _textFontPartA = `${fontStyleNormal} ${fontVariant} ${fontWeightRegular} `;
 const _textFontPartB = `/${fontLineHeight} ${fontFamily}`;
 
-/** @deprecated since v4.0.0, will be removed with next major release. Use proseTextXs instead. */
+/** @deprecated Use {@link proseTextXsStyle} instead. This API will be removed with the next major release. */
 const textXSmallStyle = {
     font: `${_textFontPartA}${fontSizeTextXSmall}${_textFontPartB}`,
 };
 
-/** @deprecated since v4.0.0, will be removed with next major release. Use proseTextSm instead. */
+/** @deprecated Use {@link proseTextSmStyle} instead. This API will be removed with the next major release. */
 const textSmallStyle = {
     font: `${_textFontPartA}${fontSizeTextSmall}${_textFontPartB}`,
 };
 
+const parse = (prop) => {
+    if (typeof prop === 'string') {
+        try {
+            // prop is potentially JSON parsable string, e.g. "{ base: 'block', l: 'inline' }" or "true" or "false"
+            return JSON.parse(prop
+                .replace(/'/g, '"') // convert single quotes to double quotes
+                .replace(/[\s"]?([a-z]+)[\s"]?:([^//])/g, '"$1":$2') // wrap keys in double quotes if they don't have them but ignore potential urls
+            );
+        }
+        catch {
+            // prop is string, e.g. "block" or "inline"
+            return prop;
+        }
+    }
+    else {
+        // prop is object, e.g. { base: 'block', l: 'inline' } or number, e.g. 123 or boolean, e.g. true
+        return prop;
+    }
+};
+const parseJSONBoolean = (prop) => 
+// prop is an HTML boolean attribute used without a value, e.g. <p-input-text hide-label>
+// Stencil resolves BreakpointCustomizable<T> to "any" and therefore skips its own boolean coercion
+// TODO: [v5] obsolete once objects can only be set via property, since Stencil coerces booleans itself then, see #4708
+(prop === '' ? true : parse(prop));
+
 // NOTE: handpicked selection of plugins from jss-preset-default
 createJss({
     plugins: [
@@ -3505,7 +3530,7 @@ const hasShowPickerSupport = () => (hasDocument &&
     'showPicker' in HTMLInputElement.prototype &&
     CSS.supports('selector(::-webkit-calendar-picker-indicator)'));
 
-const prefix = `[Porsche Design System v${"4.7.0-beta.0"}]` // this part isn't covered by unit tests
+const prefix = `[Porsche Design System v${"4.7.0"}]` // this part isn't covered by unit tests
     ;
 const consoleError$1 = (...messages) => {
     console.error(prefix, ...messages);
@@ -4216,6 +4241,8 @@ const getInlineNotificationAriaAttributes = (state, heading) => {
         'aria-label': heading || null,
     };
 };
+// both tiles need the parsed value to decide whether only one or both link/button variants have to be rendered
+const getParsedTileCompact = (compact) => parseJSONBoolean(compact);
 const getSvgUrl = (model) => {
     return `${getCDNBaseURL()}/model-signatures/${MODEL_SIGNATURES_MANIFEST[model].src}`;
 };
@@ -4446,6 +4473,7 @@ exports.getHeadingTagType = getHeadingTagType;
 exports.getInlineNotificationAriaAttributes = getInlineNotificationAriaAttributes;
 exports.getListboxAriaAttributes = getListboxAriaAttributes;
 exports.getMaxTransitionDurationMs = getMaxTransitionDurationMs;
+exports.getParsedTileCompact = getParsedTileCompact;
 exports.getSanitizedActiveTabIndex = getSanitizedActiveTabIndex;
 exports.getSegmentedControlItemAriaAttributes = getSegmentedControlItemAriaAttributes;
 exports.getStepperHorizontalIconName = getStepperHorizontalIconName;
@@ -4479,6 +4507,7 @@ exports.onCancelDialog = onCancelDialog;
 exports.onClickDialog = onClickDialog;
 exports.parseAndGetAriaAttributes = parseAndGetAriaAttributes;
 exports.parseJSONAttribute = parseJSONAttribute;
+exports.parseJSONBoolean = parseJSONBoolean;
 exports.resolveAiTagTranslationLanguage = resolveAiTagTranslationLanguage;
 exports.setAriaIDREF = setAriaIDREF;
 exports.showDialog = showDialog;

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

@@ -19,8 +19,7 @@ class DSRButtonTile extends react.Component {
     hasFooterSlot = false;
     render() {
         splitChildren.splitChildren(this.props.children);
-        // TODO: BreakpointCustomizable breaks stencils boolean conversion from string to boolean
-        const parsedCompact = this.props.compact === 'true' ? true : this.props.compact === 'false' ? false : this.props.compact;
+        const parsedCompact = utilsEntry.getParsedTileCompact(this.props.compact);
         const buttonProps = {
             variant: 'secondary',
             iconSource: this.props.iconSource,

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

@@ -3,7 +3,7 @@
 var jsxRuntime = require('react/jsx-runtime');
 var fcDismissButton = require('./fc-dismiss-button.cjs');
 
-const DialogBase = ({ children, inert, containerClass, ariaAttributes, onMouseDown, dismissable = false, header, footer, subFooter, }) => {
+const DialogBase = ({ children, inert, containerClass, ariaAttributes, dismissable = false, header, footer, subFooter, }) => {
     return (jsxRuntime.jsx("dialog", { inert: inert, tabIndex: -1, ...(ariaAttributes ?? {}), children: jsxRuntime.jsx("div", { className: "scroller", children: jsxRuntime.jsxs("div", { className: containerClass, children: [dismissable && jsxRuntime.jsx(fcDismissButton.FCDismissButton, { label: `Dismiss ${containerClass}` }), header, children, footer, subFooter] }) }) }));
 };
 

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

@@ -6,6 +6,7 @@ require('../../provider.cjs');
 var splitChildren = require('../../splitChildren.cjs');
 var minifyCss = require('../../minifyCss.cjs');
 var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.cjs');
+var utilsEntry = require('../../../../../../components/dist/utils/esm/utils-entry.cjs');
 var link_wrapper = require('../components/link.wrapper.cjs');
 
 /**
@@ -18,8 +19,7 @@ class DSRLinkTile extends react.Component {
     hasFooterSlot = false;
     render() {
         splitChildren.splitChildren(this.props.children);
-        // TODO: BreakpointCustomizable breaks stencils boolean conversion from string to boolean
-        const parsedCompact = this.props.compact === 'true' ? true : this.props.compact === 'false' ? false : this.props.compact;
+        const parsedCompact = utilsEntry.getParsedTileCompact(this.props.compact);
         const linkProps = {
             variant: 'secondary',
             aria: this.props.aria,

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/splitChildren.cjs

@@ -15,7 +15,9 @@ var react = require('react');
  */
 const splitChildren = (children) => {
     children =
-        typeof children === 'object' && 'type' in children && children.type === react.Fragment
+        // `children !== null` is required because `typeof null === 'object'`, which would
+        // make the `in` check throw for a single `null` child (e.g. `{cond ? <X/> : null}`).
+        typeof children === 'object' && children !== null && 'type' in children && children.type === react.Fragment
             ? children.props.children // Unpack children of React.Fragment
             : children;
     const childrenArray = (Array.isArray(children) ? children : children ? [children] : []).filter((x) => x !== undefined && x !== null // children are filtered due to cases where conditionally rendered children can be undefined.