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

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

@@ -3940,7 +3940,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';
@@ -4109,7 +4109,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': {
@@ -4181,7 +4181,7 @@ const getGroupDirectionJssStyles = (direction) => {
     return groupDirectionJssStyles[direction];
 };
 
-const getComponentCss$17 = (direction) => {
+const getComponentCss$18 = (direction) => {
     return getCss({
         '@global': {
             ':host': {
@@ -4334,7 +4334,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: {
@@ -4372,7 +4372,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': {
@@ -4642,7 +4642,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');
@@ -4718,7 +4718,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({
@@ -5091,7 +5091,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();
@@ -5547,7 +5547,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);
@@ -5650,7 +5650,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);
@@ -5891,7 +5891,7 @@ const widthMap = {
     basic: gridBasicOffset,
     extended: gridExtendedOffset,
 };
-const getComponentCss$$ = (width) => {
+const getComponentCss$10 = (width) => {
     return getCss({
         '@global': {
             ':host': {
@@ -5933,7 +5933,7 @@ const getDimensionStyle = {
     width: 'inherit',
     height: 'inherit',
 };
-const getComponentCss$_ = () => {
+const getComponentCss$$ = () => {
     return getCss({
         '@global': {
             ':host': {
@@ -6032,7 +6032,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': {
@@ -6050,7 +6050,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 = {
@@ -6093,7 +6093,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': {
@@ -6130,7 +6130,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': {
@@ -6177,7 +6177,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({
@@ -6199,7 +6199,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': {
@@ -6235,7 +6235,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({
@@ -6489,7 +6489,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({
@@ -6881,7 +6881,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({
@@ -6991,7 +6991,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({
@@ -7011,7 +7011,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': {
@@ -7037,7 +7037,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': {
@@ -7097,7 +7097,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': {
@@ -7205,7 +7205,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);
@@ -7324,7 +7324,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': {
@@ -7364,7 +7364,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': {
@@ -7393,7 +7393,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), {
@@ -7435,7 +7435,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': {
@@ -7569,7 +7569,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({
@@ -7708,7 +7708,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({
@@ -7849,7 +7849,7 @@ const baseSizes = {
         height: '72px',
     },
 };
-const getComponentCss$F = (size) => {
+const getComponentCss$G = (size) => {
     return getCss({
         '@global': {
             ':host': {
@@ -7899,7 +7899,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': {
@@ -8037,7 +8037,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({
@@ -8082,7 +8082,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();
@@ -8274,8 +8274,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',
@@ -8295,10 +8295,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({
@@ -8485,7 +8488,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({
@@ -8576,7 +8579,7 @@ const getOptionStyles = (theme) => {
     };
 };
 
-const getComponentCss$z = (isDisabled, theme) => getCss({
+const getComponentCss$A = (isDisabled, theme) => getCss({
     '@global': {
         ':host': addImportantToEachRule({
             ...colorSchemeStyles,
@@ -8627,7 +8630,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({
@@ -8763,7 +8766,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()
@@ -8939,7 +8942,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)';
@@ -9049,7 +9052,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({
@@ -9151,7 +9154,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,
@@ -9284,7 +9287,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({
@@ -9355,7 +9358,7 @@ const getComponentCss$t = (isDisabled, isSelected, hasIcon, hasSlottedContent, t
         }),
     });
 };
-const getComponentCss$s = (maxWidth, columns) => {
+const getComponentCss$t = (maxWidth, columns) => {
     return getCss({
         '@global': {
             ':host': {
@@ -9659,7 +9662,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({
@@ -9683,7 +9686,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': {
@@ -9747,7 +9750,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': {
@@ -9947,6 +9950,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';
@@ -10338,6 +10386,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);
@@ -10490,6 +10539,10 @@ const getComponentCss$f = () => {
                     ...hostHiddenStyles,
                 }),
             },
+            '::slotted(*)': addImportantToEachRule({
+                [cssVariableTableBorderWidth]: '0px',
+                [cssVariableTableHoverColor]: 'none',
+            }),
         },
     });
 };
@@ -10500,8 +10553,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({
@@ -10896,7 +10949,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');
@@ -10995,7 +11048,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'
@@ -11125,7 +11178,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': {
@@ -11165,7 +11218,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})`,
@@ -11180,7 +11233,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);
@@ -11268,7 +11321,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})`,
@@ -11391,60 +11444,61 @@ const getComponentCss = (size, theme) => {
     });
 };
 
-exports.getAccordionCss = getComponentCss$19;
-exports.getBannerCss = getComponentCss$18;
-exports.getButtonCss = getComponentCss$14;
-exports.getButtonGroupCss = getComponentCss$17;
-exports.getButtonPureCss = getComponentCss$16;
-exports.getButtonTileCss = getComponentCss$15;
-exports.getCanvasCss = getComponentCss$13;
-exports.getCarouselCss = getComponentCss$12;
-exports.getCheckboxCss = getComponentCss$10;
-exports.getCheckboxWrapperCss = getComponentCss$11;
-exports.getContentWrapperCss = getComponentCss$$;
-exports.getCrestCss = getComponentCss$_;
-exports.getDisplayCss = getComponentCss$Z;
-exports.getDividerCss = getComponentCss$Y;
-exports.getFieldsetCss = getComponentCss$W;
-exports.getFieldsetWrapperCss = getComponentCss$X;
-exports.getFlexCss = getComponentCss$U;
-exports.getFlexItemCss = getComponentCss$V;
-exports.getFlyoutCss = getComponentCss$R;
-exports.getFlyoutMultilevelCss = getComponentCss$T;
-exports.getFlyoutMultilevelItemCss = getComponentCss$S;
+exports.getAccordionCss = getComponentCss$1a;
+exports.getBannerCss = getComponentCss$19;
+exports.getButtonCss = getComponentCss$15;
+exports.getButtonGroupCss = getComponentCss$18;
+exports.getButtonPureCss = getComponentCss$17;
+exports.getButtonTileCss = getComponentCss$16;
+exports.getCanvasCss = getComponentCss$14;
+exports.getCarouselCss = getComponentCss$13;
+exports.getCheckboxCss = getComponentCss$11;
+exports.getCheckboxWrapperCss = getComponentCss$12;
+exports.getContentWrapperCss = getComponentCss$10;
+exports.getCrestCss = getComponentCss$$;
+exports.getDisplayCss = getComponentCss$_;
+exports.getDividerCss = getComponentCss$Z;
+exports.getFieldsetCss = getComponentCss$X;
+exports.getFieldsetWrapperCss = getComponentCss$Y;
+exports.getFlexCss = getComponentCss$V;
+exports.getFlexItemCss = getComponentCss$W;
+exports.getFlyoutCss = getComponentCss$S;
+exports.getFlyoutMultilevelCss = getComponentCss$U;
+exports.getFlyoutMultilevelItemCss = getComponentCss$T;
 exports.getFunctionalComponentLabelStyles = getFunctionalComponentLabelStyles;
 exports.getFunctionalComponentLoadingMessageStyles = getFunctionalComponentLoadingMessageStyles;
 exports.getFunctionalComponentRequiredStyles = getFunctionalComponentRequiredStyles;
 exports.getFunctionalComponentStateMessageStyles = getFunctionalComponentStateMessageStyles;
-exports.getGridCss = getComponentCss$P;
-exports.getGridItemCss = getComponentCss$Q;
-exports.getHeadingCss = getComponentCss$O;
-exports.getHeadlineCss = getComponentCss$N;
-exports.getIconCss = getComponentCss$M;
-exports.getInlineNotificationCss = getComponentCss$L;
-exports.getLinkCss = getComponentCss$J;
-exports.getLinkPureCss = getComponentCss$K;
-exports.getLinkSocialCss = getComponentCss$J;
-exports.getLinkTileCss = getComponentCss$G;
-exports.getLinkTileModelSignatureCss = getComponentCss$I;
-exports.getLinkTileProductCss = getComponentCss$H;
-exports.getMarqueCss = getComponentCss$F;
-exports.getModalCss = getComponentCss$E;
-exports.getModelSignatureCss = getComponentCss$D;
-exports.getMultiSelectCss = getComponentCss$B;
-exports.getMultiSelectOptionCss = getComponentCss$C;
-exports.getOptgroupCss = getComponentCss$z;
-exports.getPaginationCss = getComponentCss$y;
-exports.getPinCodeCss = getComponentCss$x;
-exports.getPopoverCss = getComponentCss$w;
-exports.getRadioButtonWrapperCss = getComponentCss$v;
-exports.getScrollerCss = getComponentCss$u;
-exports.getSegmentedControlCss = getComponentCss$s;
-exports.getSegmentedControlItemCss = getComponentCss$t;
-exports.getSelectCss = getComponentCss$p;
-exports.getSelectOptionCss = getComponentCss$A;
-exports.getSelectWrapperCss = getComponentCss$q;
-exports.getSelectWrapperDropdownCss = getComponentCss$r;
+exports.getGridCss = getComponentCss$Q;
+exports.getGridItemCss = getComponentCss$R;
+exports.getHeadingCss = getComponentCss$P;
+exports.getHeadlineCss = getComponentCss$O;
+exports.getIconCss = getComponentCss$N;
+exports.getInlineNotificationCss = getComponentCss$M;
+exports.getLinkCss = getComponentCss$K;
+exports.getLinkPureCss = getComponentCss$L;
+exports.getLinkSocialCss = getComponentCss$K;
+exports.getLinkTileCss = getComponentCss$H;
+exports.getLinkTileModelSignatureCss = getComponentCss$J;
+exports.getLinkTileProductCss = getComponentCss$I;
+exports.getMarqueCss = getComponentCss$G;
+exports.getModalCss = getComponentCss$F;
+exports.getModelSignatureCss = getComponentCss$E;
+exports.getMultiSelectCss = getComponentCss$C;
+exports.getMultiSelectOptionCss = getComponentCss$D;
+exports.getOptgroupCss = getComponentCss$A;
+exports.getPaginationCss = getComponentCss$z;
+exports.getPinCodeCss = getComponentCss$y;
+exports.getPopoverCss = getComponentCss$x;
+exports.getRadioButtonWrapperCss = getComponentCss$w;
+exports.getScrollerCss = getComponentCss$v;
+exports.getSegmentedControlCss = getComponentCss$t;
+exports.getSegmentedControlItemCss = getComponentCss$u;
+exports.getSelectCss = getComponentCss$q;
+exports.getSelectOptionCss = getComponentCss$B;
+exports.getSelectWrapperCss = getComponentCss$r;
+exports.getSelectWrapperDropdownCss = getComponentCss$s;
+exports.getSheetCss = getComponentCss$p;
 exports.getSpinnerCss = getComponentCss$o;
 exports.getStepperHorizontalCss = getComponentCss$m;
 exports.getStepperHorizontalItemCss = getComponentCss$n;