@porsche-design-system/components-react 3.24.0 → 3.25.0-rc.0

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

@@ -3938,7 +3938,7 @@ const formatObjectOutput = (value) => {
 };
 `value, ${formatObjectOutput(breakpoints.reduce((prev, key) => ({ ...prev, [key + (key !== 'base' ? '?' : '')]: 'value' }), {})).replace(/"/g, '')}`;
 
-const getComponentCss$19 = (size, compact, open, theme, sticky) => {
+const getComponentCss$1a = (size, compact, open, theme, sticky) => {
     const { primaryColor, hoverColor, contrastLowColor, backgroundColor } = getThemedColors(theme);
     const { primaryColor: primaryColorDark, hoverColor: hoverColorDark, contrastLowColor: contrastLowColorDark, backgroundColor: backgroundColorDark, } = getThemedColors('dark');
     const cssVariablePositionStickyTop = '--p-accordion-position-sticky-top';
@@ -4107,7 +4107,7 @@ const cssVariableTop = '--p-banner-position-top';
 const cssVariableBottom = '--p-banner-position-bottom';
 const cssVariableZIndex = '--p-internal-banner-z-index';
 const topBottomFallback = '56px';
-const getComponentCss$18 = (isOpen) => {
+const getComponentCss$19 = (isOpen) => {
     return getCss({
         '@global': {
             ':host': {
@@ -4179,7 +4179,7 @@ const getGroupDirectionJssStyles = (direction) => {
     return groupDirectionJssStyles[direction];
 };
 
-const getComponentCss$17 = (direction) => {
+const getComponentCss$18 = (direction) => {
     return getCss({
         '@global': {
             ':host': {
@@ -4332,7 +4332,7 @@ const getFunctionalComponentLoadingMessageStyles = () => {
     };
 };
 
-const getComponentCss$16 = (icon, iconSource, active, isLoading, isDisabledOrLoading, stretch, size, hideLabel, alignLabel, underline, theme) => {
+const getComponentCss$17 = (icon, iconSource, active, isLoading, isDisabledOrLoading, stretch, size, hideLabel, alignLabel, underline, theme) => {
     const hasIcon = hasVisibleIcon(icon, iconSource);
     return getCss(mergeDeep(getLinkButtonPureStyles(icon, iconSource, active, isDisabledOrLoading, stretch, size, hideLabel, alignLabel, underline, false, theme), {
         root: {
@@ -4370,7 +4370,7 @@ const getFontWeight = (weight) => {
     return fontWeightMap[weight];
 };
 
-const getComponentCss$15 = (isDisabledOrLoading, aspectRatio, size, weight, background, align, compact, hasGradient, isDisabled) => {
+const getComponentCss$16 = (isDisabledOrLoading, aspectRatio, size, weight, background, align, compact, hasGradient, isDisabled) => {
     const isTopAligned = align === 'top';
     return getCss({
         '@global': {
@@ -4640,7 +4640,7 @@ const getDisabledColors = (variant, loading, theme) => {
     };
     return colors[variant === 'tertiary' ? 'secondary' : variant];
 };
-const getComponentCss$14 = (icon, iconSource, variant, hideLabel, disabled, loading, compact, theme) => {
+const getComponentCss$15 = (icon, iconSource, variant, hideLabel, disabled, loading, compact, theme) => {
     const disabledOrLoading = isDisabledOrLoading(disabled, loading);
     const { textColor, borderColor, backgroundColor } = getDisabledColors(variant, loading, theme);
     const { textColor: textColorDark, borderColor: borderColorDark, backgroundColor: backgroundColorDark, } = getDisabledColors(variant, loading, 'dark');
@@ -4716,7 +4716,7 @@ const mediaQueryS$1 = getMediaQueryMin('s');
 const mediaQueryM = getMediaQueryMin('m');
 // others
 const spacingBase = gridGap.replace('36px', '24px');
-const getComponentCss$13 = (theme, isSidebarStartOpen, isSidebarEndOpen) => {
+const getComponentCss$14 = (theme, isSidebarStartOpen, isSidebarEndOpen) => {
     const { primaryColor, backgroundColor, backgroundSurfaceColor, contrastLowColor } = getThemedColors(theme);
     const { primaryColor: primaryColorDark, backgroundColor: backgroundColorDark, backgroundSurfaceColor: backgroundSurfaceColorDark, contrastLowColor: contrastLowColorDark, } = getThemedColors('dark');
     return getCss({
@@ -5089,7 +5089,7 @@ const getGradient$1 = (theme, gradientColorTheme) => {
         `rgba(${gradientColor},0.3) 68%,` +
         `rgba(${gradientColor},0)`);
 };
-const getComponentCss$12 = (gradientColor, hasHeading, hasDescription, hasControlsSlot, headingSize, width, hasPagination, isInfinitePagination, alignHeader, theme, hasNavigation) => {
+const getComponentCss$13 = (gradientColor, hasHeading, hasDescription, hasControlsSlot, headingSize, width, hasPagination, isInfinitePagination, alignHeader, theme, hasNavigation) => {
     const { primaryColor, contrastMediumColor } = getThemedColors(theme);
     const { primaryColor: primaryColorDark, contrastMediumColor: contrastMediumColorDark } = getThemedColors('dark');
     const { canvasTextColor } = getHighContrastColors();
@@ -5545,7 +5545,7 @@ const getCheckedSVGBackgroundImage$2 = (fill) => {
 const getIndeterminateSVGBackgroundImage$1 = (fill) => {
     return getInlineSVGBackgroundImage(`<path fill="${fill}" d="m20,11v2H4v-2h16Z"/>`);
 };
-const getComponentCss$11 = (hideLabel, state, isDisabled, isLoading, theme) => {
+const getComponentCss$12 = (hideLabel, state, isDisabled, isLoading, theme) => {
     const checkedIconColor = escapeHashCharacter(getInvertedThemedColors(theme).primaryColor);
     const checkedIconColorDark = escapeHashCharacter(getInvertedThemedColors('dark').primaryColor);
     const indeterminateIconColor = escapeHashCharacter(getThemedColors(theme).primaryColor);
@@ -5648,7 +5648,7 @@ const getIndeterminateSVGBackgroundImage = (fill) => {
     return getInlineSVGBackgroundImage(`<path fill="${fill}" d="m20,11v2H4v-2h16Z"/>`);
 };
 const cssVarInternalCheckboxScaling = '--p-internal-checkbox-scaling';
-const getComponentCss$10 = (hideLabel, state, isDisabled, isLoading, compact, theme) => {
+const getComponentCss$11 = (hideLabel, state, isDisabled, isLoading, compact, theme) => {
     const { primaryColor, contrastMediumColor, contrastHighColor, disabledColor, focusColor } = getThemedColors(theme);
     const { primaryColor: primaryColorDark, contrastMediumColor: contrastMediumColorDark, contrastHighColor: contrastHighColorDark, disabledColor: disabledColorDark, focusColor: focusColorDark, } = getThemedColors('dark');
     const { formStateColor, formStateHoverColor } = getThemedFormStateColors(theme, state);
@@ -5889,7 +5889,7 @@ const widthMap = {
     basic: gridBasicOffset,
     extended: gridExtendedOffset,
 };
-const getComponentCss$$ = (width) => {
+const getComponentCss$10 = (width) => {
     return getCss({
         '@global': {
             ':host': {
@@ -5931,7 +5931,7 @@ const getDimensionStyle = {
     width: 'inherit',
     height: 'inherit',
 };
-const getComponentCss$_ = () => {
+const getComponentCss$$ = () => {
     return getCss({
         '@global': {
             ':host': {
@@ -6030,7 +6030,7 @@ const sizeMap$4 = {
     medium: fontSizeDisplayMedium,
     large: fontSizeDisplayLarge,
 };
-const getComponentCss$Z = (size, align, color, ellipsis, theme) => {
+const getComponentCss$_ = (size, align, color, ellipsis, theme) => {
     return getCss({
         '@global': {
             ':host': {
@@ -6048,7 +6048,7 @@ const getComponentCss$Z = (size, align, color, ellipsis, theme) => {
     });
 };
 
-const getComponentCss$Y = (color, orientation, theme) => {
+const getComponentCss$Z = (color, orientation, theme) => {
     const { contrastLowColor, contrastMediumColor, contrastHighColor } = getThemedColors(theme);
     const { contrastLowColor: contrastLowColorDark, contrastMediumColor: contrastMediumColorDark, contrastHighColor: contrastHighColorDark, } = getThemedColors('dark');
     const colorMap = {
@@ -6091,7 +6091,7 @@ const getComponentCss$Y = (color, orientation, theme) => {
     });
 };
 
-const getComponentCss$X = (state, labelSize, hasLabel, theme) => {
+const getComponentCss$Y = (state, labelSize, hasLabel, theme) => {
     return getCss({
         '@global': {
             ':host': {
@@ -6128,7 +6128,7 @@ const getComponentCss$X = (state, labelSize, hasLabel, theme) => {
     });
 };
 
-const getComponentCss$W = (state, labelSize, hasLabel, theme) => {
+const getComponentCss$X = (state, labelSize, hasLabel, theme) => {
     return getCss({
         '@global': {
             ':host': {
@@ -6175,7 +6175,7 @@ const flexItemWidths = {
     full: 100,
     auto: 'auto',
 };
-const getComponentCss$V = (width, offset, alignSelf, grow, shrink, flex) => {
+const getComponentCss$W = (width, offset, alignSelf, grow, shrink, flex) => {
     return getCss({
         '@global': {
             ':host': addImportantToEachRule({
@@ -6197,7 +6197,7 @@ const getComponentCss$V = (width, offset, alignSelf, grow, shrink, flex) => {
     });
 };
 
-const getComponentCss$U = (inline, wrap, direction, justifyContent, alignItems, alignContent) => {
+const getComponentCss$V = (inline, wrap, direction, justifyContent, alignItems, alignContent) => {
     return getCss({
         '@global': {
             ':host': {
@@ -6233,7 +6233,7 @@ const scrollerBackground = {
     dark: 'rgba(0,0,0,.01)',
     auto: 'rgba(255,255,255,.01)',
 };
-const getComponentCss$T = (isOpen, isPrimary, isSecondaryScrollerVisible, theme) => {
+const getComponentCss$U = (isOpen, isPrimary, isSecondaryScrollerVisible, theme) => {
     const { backgroundColor, backgroundSurfaceColor, backgroundShadingColor } = getThemedColors(theme);
     const { backgroundColor: backgroundColorDark, backgroundSurfaceColor: backgroundSurfaceColorDark, backgroundShadingColor: backgroundShadingColorDark, } = getThemedColors('dark');
     return getCss({
@@ -6487,7 +6487,7 @@ const getComponentCss$T = (isOpen, isPrimary, isSecondaryScrollerVisible, theme)
     });
 };
 
-const getComponentCss$S = (isPrimary, isSecondary, isCascade, theme) => {
+const getComponentCss$T = (isPrimary, isSecondary, isCascade, theme) => {
     const { primaryColor, backgroundColor } = getThemedColors(theme);
     const { primaryColor: primaryColorDark, backgroundColor: backgroundColorDark } = getThemedColors('dark');
     return getCss({
@@ -6879,7 +6879,7 @@ const getDialogStickyAreaJssStyle = (area, theme) => {
 const cssVariableWidth$2 = '--p-flyout-width';
 // TODO: we shouldn't expose --p-flyout-max-width
 const cssVariableMaxWidth = '--p-flyout-max-width';
-const getComponentCss$R = (isOpen, position, hasHeader, hasFooter, hasSubFooter, footerBehavior, theme) => {
+const getComponentCss$S = (isOpen, position, hasHeader, hasFooter, hasSubFooter, footerBehavior, theme) => {
     const isPositionStart = position === 'start' || position === 'left';
     const isFooterFixed = footerBehavior === 'fixed';
     return getCss({
@@ -6989,7 +6989,7 @@ const gutter$1 = `calc(${gridGap} / 2)`;
 const gridItemWidths = [
     0, 8.333333, 16.666667, 25, 33.333333, 41.666667, 50, 58.333333, 66.666667, 75, 83.333333, 91.666667, 100,
 ];
-const getComponentCss$Q = (size, offset) => {
+const getComponentCss$R = (size, offset) => {
     return getCss({
         '@global': {
             ':host': addImportantToEachRule({
@@ -7009,7 +7009,7 @@ const getComponentCss$Q = (size, offset) => {
 };
 
 const gutter = `calc(${gridGap} / -2)`;
-const getComponentCss$P = (direction, wrap) => {
+const getComponentCss$Q = (direction, wrap) => {
     return getCss({
         '@global': {
             ':host': {
@@ -7035,7 +7035,7 @@ const sizeMap$3 = {
     'x-large': fontSizeHeadingXLarge,
     'xx-large': fontSizeHeadingXXLarge,
 };
-const getComponentCss$O = (size, align, color, ellipsis, theme) => {
+const getComponentCss$P = (size, align, color, ellipsis, theme) => {
     return getCss({
         '@global': {
             ':host': {
@@ -7095,7 +7095,7 @@ const getTextSizeJssStyle = (textSize) => {
         fontSize: textSize === 'inherit' ? textSize : textSizeMap[textSize],
     };
 };
-const getComponentCss$N = (variant, align, color, ellipsis, theme) => {
+const getComponentCss$O = (variant, align, color, ellipsis, theme) => {
     return getCss({
         '@global': {
             ':host': {
@@ -7203,7 +7203,7 @@ const isFlippableIcon = (name, source) => {
             name === 'logout' ||
             name === 'send'));
 };
-const getComponentCss$M = (name, source, color, size, theme) => {
+const getComponentCss$N = (name, source, color, size, theme) => {
     const isColorInherit = color === 'inherit';
     const isSizeInherit = size === 'inherit';
     const isDark = isThemeDark(theme);
@@ -7322,7 +7322,7 @@ const getHeadingJssStyle = (theme) => ({
     ...headingSmallStyle,
     ...getTextJssStyle(theme),
 });
-const getComponentCss$L = (state, hasAction, hasClose, theme) => {
+const getComponentCss$M = (state, hasAction, hasClose, theme) => {
     return getCss({
         '@global': {
             ':host': {
@@ -7362,7 +7362,7 @@ const getComponentCss$L = (state, hasAction, hasClose, theme) => {
     });
 };
 
-const getComponentCss$K = (icon, iconSource, active, stretch, size, hideLabel, alignLabel, underline, hasSlottedAnchor, theme) => {
+const getComponentCss$L = (icon, iconSource, active, stretch, size, hideLabel, alignLabel, underline, hasSlottedAnchor, theme) => {
     return getCss(mergeDeep(getLinkButtonPureStyles(icon, iconSource, active, false, stretch, size, hideLabel, alignLabel, underline, hasSlottedAnchor, theme), hasSlottedAnchor && {
         '@global': addImportantToEachRule({
             '::slotted': {
@@ -7391,7 +7391,7 @@ const getComponentCss$K = (icon, iconSource, active, stretch, size, hideLabel, a
 };
 
 const cssVariableInternalLinkScaling = '--p-internal-link-scaling';
-const getComponentCss$J = (icon, iconSource, variant, hideLabel, hasSlottedAnchor, compact, theme) => {
+const getComponentCss$K = (icon, iconSource, variant, hideLabel, hasSlottedAnchor, compact, theme) => {
     const { linkColor } = getHighContrastColors();
     const isPrimary = variant === 'primary';
     return getCss(mergeDeep(getLinkButtonStyles(icon, iconSource, variant, hideLabel, false, hasSlottedAnchor, compact, cssVariableInternalLinkScaling, theme), {
@@ -7433,7 +7433,7 @@ const getComponentCss$J = (icon, iconSource, variant, hideLabel, hasSlottedAncho
     }));
 };
 
-const getComponentCss$I = (aspectRatio, weight, // to get deprecated semibold typed
+const getComponentCss$J = (aspectRatio, weight, // to get deprecated semibold typed
 direction, hasDescription) => {
     return getCss({
         '@global': {
@@ -7567,7 +7567,7 @@ const getMultilineEllipsis = (lineClamp) => {
         overflow: 'hidden',
     };
 };
-const getComponentCss$H = (hasLikeButton, hasSlottedAnchor, hasPriceOriginal, hasDescription, aspectRatio, theme) => {
+const getComponentCss$I = (hasLikeButton, hasSlottedAnchor, hasPriceOriginal, hasDescription, aspectRatio, theme) => {
     const { primaryColor, contrastHighColor, contrastMediumColor, backgroundSurfaceColor } = getThemedColors(theme);
     const { primaryColor: primaryColorDark, contrastHighColor: contrastHighColorDark, contrastMediumColor: contrastMediumColorDark, backgroundSurfaceColor: backgroundSurfaceColorDark, } = getThemedColors('dark');
     return getCss({
@@ -7706,7 +7706,7 @@ const getComponentCss$H = (hasLikeButton, hasSlottedAnchor, hasPriceOriginal, ha
     });
 };
 
-const getComponentCss$G = (aspectRatio, size, weight, // to get deprecated semibold typed
+const getComponentCss$H = (aspectRatio, size, weight, // to get deprecated semibold typed
 background, align, compact, hasGradient, isDisabled) => {
     const isTopAligned = align === 'top';
     return getCss({
@@ -7847,7 +7847,7 @@ const baseSizes = {
         height: '72px',
     },
 };
-const getComponentCss$F = (size) => {
+const getComponentCss$G = (size) => {
     return getCss({
         '@global': {
             ':host': {
@@ -7897,7 +7897,7 @@ const cssVariableSpacingBottom = '--p-modal-spacing-bottom'; // TODO: maybe --p-
 const safeZoneVertical = `calc(${spacingFluidSmall} + ${spacingFluidMedium})`;
 const safeZoneHorizontal = `${spacingFluidLarge}`;
 const cssClassNameStretchToFullModalWidth = 'stretch-to-full-modal-width';
-const getComponentCss$E = (isOpen, backdrop, fullscreen, hasDismissButton, hasHeader, hasFooter, theme) => {
+const getComponentCss$F = (isOpen, backdrop, fullscreen, hasDismissButton, hasHeader, hasFooter, theme) => {
     return getCss({
         '@global': {
             ':host': {
@@ -8035,7 +8035,7 @@ const getThemedColor = (color, themedColors) => {
     };
     return colorMap[color];
 };
-const getComponentCss$D = (model, safeZone, size, color, theme) => {
+const getComponentCss$E = (model, safeZone, size, color, theme) => {
     const { width, height } = MODEL_SIGNATURES_MANIFEST[model];
     const isSizeInherit = size === 'inherit';
     return getCss({
@@ -8080,7 +8080,7 @@ const getComponentCss$D = (model, safeZone, size, color, theme) => {
 };
 
 const cssVariableMultiSelectPaddingInlineStart = '--p-internal-multi-select-option-padding-left';
-const getComponentCss$C = (theme) => {
+const getComponentCss$D = (theme) => {
     const { primaryColor, contrastHighColor, backgroundSurfaceColor, disabledColor, contrastLowColor } = getThemedColors(theme);
     const { primaryColor: primaryColorDark, disabledColor: disabledColorDark, contrastHighColor: contrastHighColorDark, backgroundSurfaceColor: backgroundSurfaceColorDark, contrastLowColor: contrastLowColorDark, } = getThemedColors('dark');
     const { highlightColor } = getHighContrastColors();
@@ -8272,8 +8272,8 @@ const getCalculatedFormElementPaddingHorizontal = (buttonOrIconAmount) => {
     return `calc(${formElementLayeredGap} + ${formElementPaddingHorizontal} / 2 + (${fontLineHeight} + ${formButtonOrIconPadding} * 2) * ${buttonOrIconAmount})`;
 };
 // TODO: re-use in textarea-wrapper not only in text-field-wrapper
-const getUnitCounterJssStyle = (isDisabled, theme) => {
-    const { disabledColor, contrastMediumColor } = getThemedColors(theme);
+const getUnitCounterJssStyle = (isDisabled, isReadonly, theme) => {
+    const { disabledColor, contrastMediumColor, contrastHighColor } = getThemedColors(theme);
     const { disabledColor: disabledColorDark, contrastMediumColor: contrastMediumColorDark } = getThemedColors('dark');
     return {
         pointerEvents: 'none',
@@ -8293,10 +8293,13 @@ const getUnitCounterJssStyle = (isDisabled, theme) => {
                 color: disabledColorDark,
             }),
         }),
+        ...(isReadonly && {
+            color: contrastHighColor,
+        })
     };
 };
 
-const getComponentCss$B = (direction, isOpen, isDisabled, hideLabel, state, isNativePopoverCase, theme) => {
+const getComponentCss$C = (direction, isOpen, isDisabled, hideLabel, state, isNativePopoverCase, theme) => {
     const { contrastHighColor } = getThemedColors(theme);
     const { contrastHighColor: contrastHighColorDark } = getThemedColors('dark');
     return getCss({
@@ -8483,7 +8486,7 @@ const getListStyles$2 = (isOpen, direction, theme) => {
 
 const cssVariableSelectPaddingInlineStart = '--p-internal-select-option-padding-left';
 // TODO: Enforce order of slotted text, img
-const getComponentCss$A = (theme) => {
+const getComponentCss$B = (theme) => {
     return getCss({
         '@global': {
             ...addImportantToEachRule({
@@ -8574,7 +8577,7 @@ const getOptionStyles = (theme) => {
     };
 };
 
-const getComponentCss$z = (isDisabled, theme) => getCss({
+const getComponentCss$A = (isDisabled, theme) => getCss({
     '@global': {
         ':host': addImportantToEachRule({
             ...colorSchemeStyles,
@@ -8625,7 +8628,7 @@ const disabledCursorStyle = {
     pointerEvents: 'none', // prevents :hover (has no effect when forced), maybe we can remove it since CSS selectors already cover desired behavior
 };
 const hiddenStyle = { display: 'none' };
-const getComponentCss$y = (activePage, pageTotal, showLastPage, theme) => {
+const getComponentCss$z = (activePage, pageTotal, showLastPage, theme) => {
     const { primaryColor, disabledColor, hoverColor } = getThemedColors(theme);
     const { primaryColor: primaryColorDark, disabledColor: disabledColorDark, hoverColor: hoverColorDark, } = getThemedColors('dark');
     return getCss({
@@ -8761,7 +8764,7 @@ const removeStyles = (selector, styles) => Object.fromEntries(Object.entries(sty
     return [key, value];
 }));
 
-const getComponentCss$x = (hideLabel, state, isDisabled, isLoading, length, theme) => {
+const getComponentCss$y = (hideLabel, state, isDisabled, isLoading, length, theme) => {
     const inputSize = `calc(${fontLineHeight} + 10px + ${borderWidthBase} * 2 + ${spacingStaticSmall} * 2)`; // equivalent to calculation of input height within form-styles
     const inputStyles = removeStyles('input[readonly]', removeSlottedSelector(getSlottedTextFieldTextareaSelectStyles('input', state, isLoading, theme, {
         // TODO: move into getSlottedTextFieldTextareaSelectStyles()
@@ -8937,7 +8940,7 @@ const getDirectionArrowMap = (theme) => {
         },
     };
 };
-const getComponentCss$w = (direction, isNativePopoverCase, theme) => {
+const getComponentCss$x = (direction, isNativePopoverCase, theme) => {
     const { hoverColor, backgroundColor, primaryColor, backgroundSurfaceColor } = getThemedColors(theme);
     const { hoverColor: hoverColorDark, primaryColor: primaryColorDark, backgroundSurfaceColor: backgroundSurfaceColorDark, } = getThemedColors('dark');
     const shadowColor = 'rgba(0,0,0,0.3)';
@@ -9047,7 +9050,7 @@ const getComponentCss$w = (direction, isNativePopoverCase, theme) => {
 const getCheckedSVGBackgroundImage = (fill) => {
     return getInlineSVGBackgroundImage(`<circle fill="${fill}" cx="12" cy="12" r="6"/>`);
 };
-const getComponentCss$v = (hideLabel, state, isDisabled, isLoading, theme) => {
+const getComponentCss$w = (hideLabel, state, isDisabled, isLoading, theme) => {
     const checkedIconColor = escapeHashCharacter(getInvertedThemedColors(theme).primaryColor);
     const checkedIconColorDark = escapeHashCharacter(getInvertedThemedColors('dark').primaryColor);
     return getCss({
@@ -9149,7 +9152,7 @@ const getGradient = (theme, gradientColorTheme) => {
         `rgba(${gradientColor},0)`);
 };
 const prevNextWrapperWidth = `calc(${fontLineHeight} + 24px)`;
-const getComponentCss$u = (gradientColor, isNextHidden, isPrevHidden, scrollIndicatorPosition, hasScrollbar, theme) => {
+const getComponentCss$v = (gradientColor, isNextHidden, isPrevHidden, scrollIndicatorPosition, hasScrollbar, theme) => {
     const actionPrevNextStyles = {
         position: 'absolute',
         top: 0,
@@ -9282,7 +9285,7 @@ const getColors$2 = (isDisabled, isSelected, theme) => {
     };
 };
 const getItemPadding = (hasIconAndSlottedContent) => hasIconAndSlottedContent ? `13px ${ITEM_PADDING} 13px 13px` : `13px ${ITEM_PADDING}`;
-const getComponentCss$t = (isDisabled, isSelected, hasIcon, hasSlottedContent, theme) => {
+const getComponentCss$u = (isDisabled, isSelected, hasIcon, hasSlottedContent, theme) => {
     const { buttonColor, labelColor, borderColor, hoverBorderColor } = getColors$2(isDisabled, isSelected, theme);
     const { buttonColor: buttonColorDark, labelColor: labelColorDark, borderColor: borderColorDark, hoverBorderColor: hoverBorderColorDark, } = getColors$2(isDisabled, isSelected, 'dark');
     return getCss({
@@ -9353,7 +9356,7 @@ const getComponentCss$t = (isDisabled, isSelected, hasIcon, hasSlottedContent, t
         }),
     });
 };
-const getComponentCss$s = (maxWidth, columns) => {
+const getComponentCss$t = (maxWidth, columns) => {
     return getCss({
         '@global': {
             ':host': {
@@ -9657,7 +9660,7 @@ const getListStyles$1 = (direction, theme) => {
         },
     };
 };
-const getComponentCss$r = (direction, isOpen, state, disabled, filter, isNativePopoverCase, theme) => {
+const getComponentCss$s = (direction, isOpen, state, disabled, filter, isNativePopoverCase, theme) => {
     return getCss(
     // merge because of global styles
     mergeDeep({
@@ -9681,7 +9684,7 @@ const getComponentCss$r = (direction, isOpen, state, disabled, filter, isNativeP
         : getButtonStyles$1(direction, isOpen, state, theme), isOpen && getListStyles$1(direction, theme)));
 };
 
-const getComponentCss$q = (isDisabled, hasCustomDropdown, hideLabel, state, theme) => {
+const getComponentCss$r = (isDisabled, hasCustomDropdown, hideLabel, state, theme) => {
     return getCss({
         '@global': {
             ':host': {
@@ -9745,7 +9748,7 @@ const cssVarBorderColor = '--p-select-border-color';
 const cssVarIconFilter = '--p-select-icon-filter';
 const cssVarBackgroundColorFocus = '--p-select-focus-background-color';
 const cssVarBorderColorFocus = '--p-select-focus-border-color';
-const getComponentCss$p = (direction, isOpen, isDisabled, hideLabel, state, isNativePopoverCase, theme, hasSlottedImage) => {
+const getComponentCss$q = (direction, isOpen, isDisabled, hideLabel, state, isNativePopoverCase, theme, hasSlottedImage) => {
     return getCss({
         '@global': {
             ':host': {
@@ -9945,6 +9948,51 @@ const getListStyles = (isOpen, direction, theme) => {
     };
 };
 
+const getComponentCss$p = (isOpen, hasDismissButton, theme) => {
+    return getCss({
+        '@global': {
+            ':host': {
+                display: 'block',
+                ...addImportantToEachRule({
+                    ...dialogHostJssStyle,
+                    ...colorSchemeStyles,
+                    ...hostHiddenStyles,
+                }),
+            },
+            ...preventFoucOfNestedElementsStyles,
+            slot: {
+                display: 'block',
+                gridColumn: '2/3',
+                zIndex: 0, // controls layering + creates new stacking context (prevents content within to be above other dialog areas)
+            },
+            dialog: getDialogJssStyle(isOpen, theme, 'shading'),
+        },
+        scroller: getScrollerJssStyle('fullscreen', theme),
+        sheet: {
+            ...dialogGridJssStyle,
+            ...getDialogColorJssStyle(theme),
+            ...getDialogTransitionJssStyle(isOpen, '^'),
+            width: '100%',
+            alignSelf: 'flex-end',
+            marginBlockStart: spacingFluidLarge, // ensures minimal space at the top to visualize paper sheet like border top radius in case sheet becomes scrollable
+            borderTopLeftRadius: borderRadiusLarge,
+            borderTopRightRadius: borderRadiusLarge,
+        },
+        ...(hasDismissButton && {
+            dismiss: {
+                ...dismissButtonJssStyle,
+                gridArea: '1/3',
+                zIndex: 2, // ensures dismiss button is above header and content
+                position: 'sticky',
+                insetBlockStart: spacingFluidSmall,
+                marginBlockStart: `calc(${spacingFluidMedium} * -1)`,
+                marginInlineEnd: spacingFluidSmall,
+                placeSelf: 'flex-start flex-end',
+            },
+        }),
+    });
+};
+
 const sizeSmall = '48px';
 const sizeMedium = '72px';
 const sizeLarge = '104px';
@@ -10336,6 +10384,7 @@ const isSortable = (active, direction) => {
 
 const cssVariableTableHoverColor = '--p-internal-table-hover-color';
 const cssVariableTableBorderColor = '--p-internal-table-border-color';
+const cssVariableTableBorderWidth = '--p-internal-table-border-width';
 const cssVariableTableHeadCellIconFilter = '--p-internal-table-head-cell-icon-filter';
 const getComponentCss$i = (theme) => {
     const { primaryColor, hoverColor, contrastLowColor } = doGetThemedColors(theme);
@@ -10488,6 +10537,10 @@ const getComponentCss$f = () => {
                     ...hostHiddenStyles,
                 }),
             },
+            '::slotted(*)': addImportantToEachRule({
+                [cssVariableTableBorderWidth]: '0px',
+                [cssVariableTableHoverColor]: 'none',
+            }),
         },
     });
 };
@@ -10498,8 +10551,8 @@ const getComponentCss$e = () => {
             ':host': {
                 display: 'table-row',
                 ...addImportantToEachRule({
-                    borderTop: `1px solid var(${cssVariableTableBorderColor})`,
-                    borderBottom: `1px solid var(${cssVariableTableBorderColor})`,
+                    borderTop: `var(${cssVariableTableBorderWidth},1px) solid var(${cssVariableTableBorderColor})`,
+                    borderBottom: `var(${cssVariableTableBorderWidth},1px) solid var(${cssVariableTableBorderColor})`,
                     transition: getTransition('background'),
                     ...hostHiddenStyles,
                     ...hoverMediaQuery({
@@ -10894,7 +10947,7 @@ const showCustomCalendarOrTimeIndicator = (isCalendar, isTime) => {
 
 const cssVariableInputPaddingStart = '--p-internal-text-field-input-padding-start';
 const cssVariableInputPaddingEnd = '--p-internal-text-field-input-padding-end';
-const getComponentCss$8 = (isDisabled, hideLabel, state, hasUnitOrVisibleCounter, unitPosition, inputType, showPasswordToggle, isWithinForm, hasSubmitButton, theme, unitLength) => {
+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');
     const isNumber = isType(inputType, 'number');
@@ -10993,7 +11046,7 @@ const getComponentCss$8 = (isDisabled, hideLabel, state, hasUnitOrVisibleCounter
         }),
         ...(hasUnitOrVisibleCounter && {
             'unit-counter': {
-                ...getUnitCounterJssStyle(isDisabled, theme),
+                ...getUnitCounterJssStyle(isDisabled, isReadonly, theme),
                 gridArea: `1/${unitPosition === 'suffix' ? 5 : 1}/1/${unitPosition === 'suffix' ? 7 : 3}`,
                 placeSelf: 'center',
                 paddingInline: unitPosition === 'suffix'
@@ -11123,7 +11176,7 @@ const getComponentCss$5 = (size, weight, align, color, ellipsis, theme) => {
     });
 };
 
-const getComponentCss$4 = (isDisabled, hideLabel, state, hasCounter, theme) => {
+const getComponentCss$4 = (isDisabled, isReadonly, hideLabel, state, hasCounter, theme) => {
     return getCss({
         '@global': {
             ':host': {
@@ -11163,7 +11216,7 @@ const getComponentCss$4 = (isDisabled, hideLabel, state, hasCounter, theme) => {
         },
         ...(hasCounter && {
             counter: {
-                ...getUnitCounterJssStyle(isDisabled, theme),
+                ...getUnitCounterJssStyle(isDisabled, isReadonly, theme),
                 gridArea: '1/1',
                 placeSelf: 'flex-end',
                 padding: `6px calc(${formElementPaddingHorizontal} + ${borderWidthBase})`,
@@ -11178,7 +11231,7 @@ const getComponentCss$4 = (isDisabled, hideLabel, state, hasCounter, theme) => {
     });
 };
 
-const getComponentCss$3 = (isDisabled, hideLabel, state, hasCounter, resize, theme) => {
+const getComponentCss$3 = (isDisabled, isReadonly, hideLabel, state, hasCounter, resize, theme) => {
     const { primaryColor, contrastLowColor, contrastMediumColor, disabledColor } = getThemedColors(theme);
     const { primaryColor: primaryColorDark, contrastLowColor: contrastLowColorDark, contrastMediumColor: contrastMediumColorDark, disabledColor: disabledColorDark, } = getThemedColors('dark');
     const { formStateColor, formStateHoverColor } = getThemedFormStateColors(theme, state);
@@ -11266,7 +11319,7 @@ const getComponentCss$3 = (isDisabled, hideLabel, state, hasCounter, resize, the
         },
         ...(hasCounter && {
             counter: {
-                ...getUnitCounterJssStyle(isDisabled, theme),
+                ...getUnitCounterJssStyle(isDisabled, isReadonly, theme),
                 gridArea: '1/1',
                 placeSelf: 'flex-end',
                 padding: `6px calc(${formElementPaddingHorizontal} + ${borderWidthBase})`,
@@ -11389,4 +11442,4 @@ const getComponentCss = (size, theme) => {
     });
 };
 
-export { getComponentCss$19 as getAccordionCss, getComponentCss$18 as getBannerCss, getComponentCss$14 as getButtonCss, getComponentCss$17 as getButtonGroupCss, getComponentCss$16 as getButtonPureCss, getComponentCss$15 as getButtonTileCss, getComponentCss$13 as getCanvasCss, getComponentCss$12 as getCarouselCss, getComponentCss$10 as getCheckboxCss, getComponentCss$11 as getCheckboxWrapperCss, getComponentCss$$ as getContentWrapperCss, getComponentCss$_ as getCrestCss, getComponentCss$Z as getDisplayCss, getComponentCss$Y as getDividerCss, getComponentCss$W as getFieldsetCss, getComponentCss$X as getFieldsetWrapperCss, getComponentCss$U as getFlexCss, getComponentCss$V as getFlexItemCss, getComponentCss$R as getFlyoutCss, getComponentCss$T as getFlyoutMultilevelCss, getComponentCss$S as getFlyoutMultilevelItemCss, getFunctionalComponentLabelStyles, getFunctionalComponentLoadingMessageStyles, getFunctionalComponentRequiredStyles, getFunctionalComponentStateMessageStyles, getComponentCss$P as getGridCss, getComponentCss$Q as getGridItemCss, getComponentCss$O as getHeadingCss, getComponentCss$N as getHeadlineCss, getComponentCss$M as getIconCss, getComponentCss$L as getInlineNotificationCss, getComponentCss$J as getLinkCss, getComponentCss$K as getLinkPureCss, getComponentCss$J as getLinkSocialCss, getComponentCss$G as getLinkTileCss, getComponentCss$I as getLinkTileModelSignatureCss, getComponentCss$H as getLinkTileProductCss, getComponentCss$F as getMarqueCss, getComponentCss$E as getModalCss, getComponentCss$D as getModelSignatureCss, getComponentCss$B as getMultiSelectCss, getComponentCss$C as getMultiSelectOptionCss, getComponentCss$z as getOptgroupCss, getComponentCss$y as getPaginationCss, getComponentCss$x as getPinCodeCss, getComponentCss$w as getPopoverCss, getComponentCss$v as getRadioButtonWrapperCss, getComponentCss$u as getScrollerCss, getComponentCss$s as getSegmentedControlCss, getComponentCss$t as getSegmentedControlItemCss, getComponentCss$p as getSelectCss, getComponentCss$A as getSelectOptionCss, getComponentCss$q as getSelectWrapperCss, getComponentCss$r as getSelectWrapperDropdownCss, getComponentCss$o as getSpinnerCss, getComponentCss$m as getStepperHorizontalCss, getComponentCss$n as getStepperHorizontalItemCss, getComponentCss$l as getSwitchCss, getComponentCss$k as getTableBodyCss, getComponentCss$j as getTableCellCss, getComponentCss$i as getTableCss, getComponentCss$h as getTableHeadCellCss, getComponentCss$f as getTableHeadCss, getComponentCss$g as getTableHeadRowCss, getComponentCss$e as getTableRowCss, getComponentCss$d as getTabsBarCss, getComponentCss$b as getTabsCss, getComponentCss$c as getTabsItemCss, getComponentCss$9 as getTagCss, getComponentCss$a as getTagDismissibleCss, getComponentCss$5 as getTextCss, getComponentCss$8 as getTextFieldWrapperCss, getComponentCss$7 as getTextListCss, getComponentCss$6 as getTextListItemCss, getComponentCss$3 as getTextareaCss, getComponentCss$4 as getTextareaWrapperCss, getComponentCss$1 as getToastCss, getComponentCss as getWordmarkCss };
+export { getComponentCss$1a as getAccordionCss, getComponentCss$19 as getBannerCss, getComponentCss$15 as getButtonCss, getComponentCss$18 as getButtonGroupCss, getComponentCss$17 as getButtonPureCss, getComponentCss$16 as getButtonTileCss, getComponentCss$14 as getCanvasCss, getComponentCss$13 as getCarouselCss, getComponentCss$11 as getCheckboxCss, getComponentCss$12 as getCheckboxWrapperCss, getComponentCss$10 as getContentWrapperCss, getComponentCss$$ as getCrestCss, getComponentCss$_ as getDisplayCss, getComponentCss$Z as getDividerCss, getComponentCss$X as getFieldsetCss, getComponentCss$Y as getFieldsetWrapperCss, getComponentCss$V as getFlexCss, getComponentCss$W as getFlexItemCss, getComponentCss$S as getFlyoutCss, getComponentCss$U as getFlyoutMultilevelCss, getComponentCss$T as getFlyoutMultilevelItemCss, getFunctionalComponentLabelStyles, getFunctionalComponentLoadingMessageStyles, getFunctionalComponentRequiredStyles, getFunctionalComponentStateMessageStyles, getComponentCss$Q as getGridCss, getComponentCss$R as getGridItemCss, getComponentCss$P as getHeadingCss, getComponentCss$O as getHeadlineCss, getComponentCss$N as getIconCss, getComponentCss$M as getInlineNotificationCss, getComponentCss$K as getLinkCss, getComponentCss$L as getLinkPureCss, getComponentCss$K as getLinkSocialCss, getComponentCss$H as getLinkTileCss, getComponentCss$J as getLinkTileModelSignatureCss, getComponentCss$I as getLinkTileProductCss, getComponentCss$G as getMarqueCss, getComponentCss$F as getModalCss, getComponentCss$E as getModelSignatureCss, getComponentCss$C as getMultiSelectCss, getComponentCss$D as getMultiSelectOptionCss, getComponentCss$A as getOptgroupCss, getComponentCss$z as getPaginationCss, getComponentCss$y as getPinCodeCss, getComponentCss$x as getPopoverCss, getComponentCss$w as getRadioButtonWrapperCss, getComponentCss$v as getScrollerCss, getComponentCss$t as getSegmentedControlCss, getComponentCss$u as getSegmentedControlItemCss, getComponentCss$q as getSelectCss, getComponentCss$B as getSelectOptionCss, getComponentCss$r as getSelectWrapperCss, getComponentCss$s as getSelectWrapperDropdownCss, getComponentCss$p as getSheetCss, getComponentCss$o as getSpinnerCss, getComponentCss$m as getStepperHorizontalCss, getComponentCss$n as getStepperHorizontalItemCss, getComponentCss$l as getSwitchCss, getComponentCss$k as getTableBodyCss, getComponentCss$j as getTableCellCss, getComponentCss$i as getTableCss, getComponentCss$h as getTableHeadCellCss, getComponentCss$f as getTableHeadCss, getComponentCss$g as getTableHeadRowCss, getComponentCss$e as getTableRowCss, getComponentCss$d as getTabsBarCss, getComponentCss$b as getTabsCss, getComponentCss$c as getTabsItemCss, getComponentCss$9 as getTagCss, getComponentCss$a as getTagDismissibleCss, getComponentCss$5 as getTextCss, getComponentCss$8 as getTextFieldWrapperCss, getComponentCss$7 as getTextListCss, getComponentCss$6 as getTextListItemCss, getComponentCss$3 as getTextareaCss, getComponentCss$4 as getTextareaWrapperCss, getComponentCss$1 as getToastCss, getComponentCss as getWordmarkCss };

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

@@ -5,20 +5,20 @@ import { usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../
 import { syncRef } from '../../utils.mjs';
 import { DSRButtonPure } from '../dsr-components/button-pure.mjs';
 
-const PButtonPure = /*#__PURE__*/ forwardRef(({ active = false, alignLabel = 'end', aria, disabled = false, hideLabel = false, icon = 'arrow-right', iconSource, loading = false, name, size = 'small', stretch = false, theme, type = 'submit', underline = false, value, weight = 'regular', className, children, ...rest }, ref) => {
+const PButtonPure = /*#__PURE__*/ forwardRef(({ active = false, alignLabel = 'end', aria, disabled = false, form, hideLabel = false, icon = 'arrow-right', iconSource, loading = false, name, size = 'small', stretch = false, theme, type = 'submit', underline = false, value, weight = 'regular', className, children, ...rest }, ref) => {
     const elementRef = useRef(undefined);
     const WebComponentTag = usePrefix('p-button-pure');
-    const propsToSync = [active, alignLabel, aria, disabled, hideLabel, icon, iconSource, loading, name, size, stretch, theme || useTheme(), type, underline, value, weight];
+    const propsToSync = [active, alignLabel, aria, disabled, form, hideLabel, icon, iconSource, loading, name, size, stretch, theme || useTheme(), type, underline, value, weight];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['active', 'alignLabel', 'aria', 'disabled', 'hideLabel', 'icon', 'iconSource', 'loading', 'name', 'size', 'stretch', 'theme', 'type', 'underline', 'value', 'weight'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['active', 'alignLabel', 'aria', 'disabled', 'form', 'hideLabel', 'icon', 'iconSource', 'loading', 'name', 'size', 'stretch', 'theme', 'type', 'underline', 'value', 'weight'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsx(DSRButtonPure, { active, alignLabel, aria, disabled, hideLabel, icon, iconSource, loading, name, size, stretch, theme: theme || useTheme(), type, underline, value, weight, children })),
+                children: (jsx(DSRButtonPure, { active, alignLabel, aria, disabled, form, hideLabel, icon, iconSource, loading, name, size, stretch, theme: theme || useTheme(), type, underline, value, weight, children })),
             }
             : {
                 children,

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

@@ -5,20 +5,20 @@ import { usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../
 import { syncRef } from '../../utils.mjs';
 import { DSRButton } from '../dsr-components/button.mjs';
 
-const PButton = /*#__PURE__*/ forwardRef(({ aria, compact = false, disabled = false, hideLabel = false, icon = 'none', iconSource, loading = false, name, theme, type = 'submit', value, variant = 'primary', className, children, ...rest }, ref) => {
+const PButton = /*#__PURE__*/ forwardRef(({ aria, compact = false, disabled = false, form, hideLabel = false, icon = 'none', iconSource, loading = false, name, theme, type = 'submit', value, variant = 'primary', className, children, ...rest }, ref) => {
     const elementRef = useRef(undefined);
     const WebComponentTag = usePrefix('p-button');
-    const propsToSync = [aria, compact, disabled, hideLabel, icon, iconSource, loading, name, theme || useTheme(), type, value, variant];
+    const propsToSync = [aria, compact, disabled, form, hideLabel, icon, iconSource, loading, name, theme || useTheme(), type, value, variant];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['aria', 'compact', 'disabled', 'hideLabel', 'icon', 'iconSource', 'loading', 'name', 'theme', 'type', 'value', 'variant'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['aria', 'compact', 'disabled', 'form', 'hideLabel', 'icon', 'iconSource', 'loading', 'name', 'theme', 'type', 'value', 'variant'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsx(DSRButton, { aria, compact, disabled, hideLabel, icon, iconSource, loading, name, theme: theme || useTheme(), type, value, variant, children })),
+                children: (jsx(DSRButton, { aria, compact, disabled, form, hideLabel, icon, iconSource, loading, name, theme: theme || useTheme(), type, value, variant, children })),
             }
             : {
                 children,