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

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

@@ -3507,37 +3507,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. */
@@ -3558,12 +3558,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});`,
 };
@@ -3617,7 +3617,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;
@@ -3686,35 +3686,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"
@@ -3733,6 +3733,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({
@@ -3758,8 +3772,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
@@ -3771,6 +3784,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) => {
@@ -3847,7 +3865,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);
@@ -4085,7 +4103,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
@@ -4739,7 +4757,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' }),
@@ -4755,9 +4773,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) => ({
@@ -4774,7 +4792,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),
@@ -4805,7 +4823,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,
                 }))),
             }
@@ -4961,7 +4979,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',
@@ -4978,7 +4996,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',
             })),
         },
@@ -4986,7 +5004,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',
             })),
         },
@@ -5018,7 +5036,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)`;
@@ -5028,10 +5046,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({
@@ -5056,7 +5074,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),
             })),
@@ -5084,13 +5102,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
                 })),
             },
@@ -5715,7 +5733,7 @@ const getComponentCss$13 = (gradient, hasHeading, hasDescription, hasControlsSlo
         },
         ...(hasPagination && {
             'pagination-container': {
-                ...buildResponsiveStyles(hasPagination, (hasPaginationValue) => ({
+                ...buildResponsiveBooleanStyles(hasPagination, (hasPaginationValue) => ({
                     display: hasPaginationValue ? 'flex' : 'none',
                 })),
                 position: 'relative',
@@ -5988,7 +6006,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),
             })),
@@ -6014,7 +6032,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(*)': {
@@ -7430,7 +7448,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',
@@ -7886,7 +7904,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),
                     })),
@@ -8150,7 +8168,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',
@@ -8167,7 +8185,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',
             })),
         },
@@ -8175,7 +8193,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',
             })),
         },
@@ -8222,9 +8240,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)),
                         }),
@@ -8289,7 +8307,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',
@@ -9765,7 +9783,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({
@@ -9774,7 +9792,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' }),
@@ -9829,7 +9847,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/esm/components/dist/utils/esm/utils-entry.mjs

@@ -3293,37 +3293,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;
@@ -3377,16 +3377,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: [
@@ -3503,7 +3528,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);
@@ -4214,6 +4239,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}`;
 };
@@ -4407,4 +4434,4 @@ const getTextTagType = (host, tag) => {
     return tag;
 };
 
-export { AI_TAG_LOCALES_DEPRECATED, AI_TAG_TRANSLATIONS, DISPLAY_TAGS, HEADING_TAGS, ItemType, MARKET_LOCALES, TEXT_TAGS, anchorSlot, attributeMutationMap, buildCrestImgSrc, buildCrestSrcSet, buildFlagUrl, buildIconUrl, consoleError$1 as consoleError, createPaginationItems, createRange, createTopLayerController, crestSize, descriptionId, displaySizeToTagMap, getAiTagLanguage, getAiTagTranslation, getBannerAriaAttributes, getButtonAriaAttributes, getButtonBaseAriaAttributes, getButtonPureAriaAttributes, getCDNBaseURL, getComboboxAriaAttributes, getCurrentActivePage, getDirectChildHTMLElement, getDisplayTagType, getFieldsetAriaAttributes, getHTMLElement, getHasNativePopoverSupport, getHeadingTagType, getInlineNotificationAriaAttributes, getListboxAriaAttributes, getMaxTransitionDurationMs, getSanitizedActiveTabIndex, getSegmentedControlItemAriaAttributes, getStepperHorizontalIconName, getSvgUrl, getSwitchButtonAriaAttributes, getTagName, getTagNameWithoutPrefix, getTextTagType, getTotalPages, hasDocument, hasShowPickerSupport, hasSpecificDirectChildTag, hasVisibleIcon, hasWindow$1 as hasWindow, headerSlot, internalDrilldown, isCurrentInput, isDialogBackdropTarget, isDisabledOrLoading, isElementOfKind, isInfinitePagination, isListTypeOrdered, isSortable, isStateCompleteOrWarning, isUrl, labelId, mergeInputNativeAria, normalizeAiTagLocale, observedNodesMap, onCancelDialog, onClickDialog, parseAndGetAriaAttributes, parseJSONAttribute, resolveAiTagTranslationLanguage, setAriaIDREF, showDialog, supportsConstructableStylesheets, supportsNativePopover, supportsOverlayTransition, tempDiv, tempIcon, tempLabel, traverseTreeAndUpdateState, updateDrilldownItemState };
+export { AI_TAG_LOCALES_DEPRECATED, AI_TAG_TRANSLATIONS, DISPLAY_TAGS, HEADING_TAGS, ItemType, MARKET_LOCALES, TEXT_TAGS, anchorSlot, attributeMutationMap, buildCrestImgSrc, buildCrestSrcSet, buildFlagUrl, buildIconUrl, consoleError$1 as consoleError, createPaginationItems, createRange, createTopLayerController, crestSize, descriptionId, displaySizeToTagMap, getAiTagLanguage, getAiTagTranslation, getBannerAriaAttributes, getButtonAriaAttributes, getButtonBaseAriaAttributes, getButtonPureAriaAttributes, getCDNBaseURL, getComboboxAriaAttributes, getCurrentActivePage, getDirectChildHTMLElement, getDisplayTagType, getFieldsetAriaAttributes, getHTMLElement, getHasNativePopoverSupport, getHeadingTagType, getInlineNotificationAriaAttributes, getListboxAriaAttributes, getMaxTransitionDurationMs, getParsedTileCompact, getSanitizedActiveTabIndex, getSegmentedControlItemAriaAttributes, getStepperHorizontalIconName, getSvgUrl, getSwitchButtonAriaAttributes, getTagName, getTagNameWithoutPrefix, getTextTagType, getTotalPages, hasDocument, hasShowPickerSupport, hasSpecificDirectChildTag, hasVisibleIcon, hasWindow$1 as hasWindow, headerSlot, internalDrilldown, isCurrentInput, isDialogBackdropTarget, isDisabledOrLoading, isElementOfKind, isInfinitePagination, isListTypeOrdered, isSortable, isStateCompleteOrWarning, isUrl, labelId, mergeInputNativeAria, normalizeAiTagLocale, observedNodesMap, onCancelDialog, onClickDialog, parseAndGetAriaAttributes, parseJSONAttribute, parseJSONBoolean, resolveAiTagTranslationLanguage, setAriaIDREF, showDialog, supportsConstructableStylesheets, supportsNativePopover, supportsOverlayTransition, tempDiv, tempIcon, tempLabel, traverseTreeAndUpdateState, updateDrilldownItemState };

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

@@ -4,7 +4,7 @@ import '../../provider.mjs';
 import { splitChildren } from '../../splitChildren.mjs';
 import { minifyCss } from '../../minifyCss.mjs';
 import { getButtonTileCss as getComponentCss$16 } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
-import { isDisabledOrLoading } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
+import { getParsedTileCompact, isDisabledOrLoading } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
 import { PButton } from '../components/button.wrapper.mjs';
 
 /**
@@ -17,8 +17,7 @@ class DSRButtonTile extends Component {
     hasFooterSlot = false;
     render() {
         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 = getParsedTileCompact(this.props.compact);
         const buttonProps = {
             variant: 'secondary',
             iconSource: this.props.iconSource,

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

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

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

@@ -4,6 +4,7 @@ import '../../provider.mjs';
 import { splitChildren } from '../../splitChildren.mjs';
 import { minifyCss } from '../../minifyCss.mjs';
 import { getLinkTileCss as getComponentCss$E } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
+import { getParsedTileCompact } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
 import { PLink } from '../components/link.wrapper.mjs';
 
 /**
@@ -16,8 +17,7 @@ class DSRLinkTile extends Component {
     hasFooterSlot = false;
     render() {
         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 = getParsedTileCompact(this.props.compact);
         const linkProps = {
             variant: 'secondary',
             aria: this.props.aria,

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/splitChildren.mjs

@@ -13,7 +13,9 @@ import { Fragment } from 'react';
  */
 const splitChildren = (children) => {
     children =
-        typeof children === 'object' && 'type' in children && children.type === 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 === 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.

package/tailwindcss/index.css

@@ -193,38 +193,38 @@
   --radius-4xl: 32px;
   --radius-full: calc(infinity * 1px);
   --default-border-width: 1px;
-  /* alias (deprecated) */
+  /* @deprecated Use --default-border-width instead. This API will be removed with the next major release. The default border width is now 1px. */
   --border-width-regular: 2px;
-  /* alias (deprecated) */
+  /* @deprecated Use --default-border-width instead. This API will be removed with the next major release. */
   --border-width-thin: 1px;
   --blur-frosted: 32px;
   --shadow-sm: 0px 3px 8px rgba(0, 0, 0, 0.16);
   --shadow-md: 0px 4px 16px rgba(0, 0, 0, 0.16);
   --shadow-lg: 0px 8px 40px rgba(0, 0, 0, 0.16);
+  /* @deprecated Use --shadow-sm instead. This API will be removed with the next major release. */
+  --shadow-low: --theme(--shadow-sm);
+  /* @deprecated Use --shadow-md instead. This API will be removed with the next major release. */
+  --shadow-medium: --theme(--shadow-md);
+  /* @deprecated Use --shadow-lg instead. This API will be removed with the next major release. */
+  --shadow-high: --theme(--shadow-lg);
   --default-outline-width: 2px;
   --transition-duration-sm: 0.25s;
   --transition-duration-md: 0.4s;
   --transition-duration-lg: 0.6s;
   --transition-duration-xl: 1.2s;
+  /* @deprecated Use --transition-duration-sm instead. This API will be removed with the next major release. */
+  --transition-duration-short: --theme(--transition-duration-sm);
+  /* @deprecated Use --transition-duration-md instead. This API will be removed with the next major release. */
+  --transition-duration-moderate: --theme(--transition-duration-md);
+  /* @deprecated Use --transition-duration-lg instead. This API will be removed with the next major release. */
+  --transition-duration-long: --theme(--transition-duration-lg);
+  /* @deprecated Use --transition-duration-xl instead. This API will be removed with the next major release. */
+  --transition-duration-very-long: --theme(--transition-duration-xl);
   --ease-in-out: cubic-bezier(0.25, 0.1, 0.25, 1);
   --ease-in: cubic-bezier(0, 0, 0.2, 1);
   --ease-out: cubic-bezier(0.4, 0, 0.5, 1);
   --default-transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
   --default-transition-duration: 0.25s;
-  /* alias (deprecated) */
-  --shadow-low: --theme(--shadow-sm);
-  /* alias (deprecated) */
-  --shadow-medium: --theme(--shadow-md);
-  /* alias (deprecated) */
-  --shadow-high: --theme(--shadow-lg);
-  /* alias (deprecated) */
-  --transition-duration-short: --theme(--transition-duration-sm);
-  /* alias (deprecated) */
-  --transition-duration-moderate: --theme(--transition-duration-md);
-  /* alias (deprecated) */
-  --transition-duration-long: --theme(--transition-duration-lg);
-  /* alias (deprecated) */
-  --transition-duration-very-long: --theme(--transition-duration-xl);
   --animate-skeleton: skeleton --theme(--transition-duration-xl)
     --theme(--ease-in-out) infinite;
   @keyframes skeleton {