@porsche-design-system/components-react 4.0.0-rc.1 → 4.0.0

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

@@ -64,6 +64,8 @@ const colorInfo = 'var(--p-color-info)';
 
 const colorInfoFrosted = 'var(--p-color-info-frosted)';
 
+const colorInfoFrostedSoft = 'var(--p-color-info-frosted-soft)';
+
 const colorInfoMedium = 'var(--p-color-info-medium)';
 
 const colorSuccess = 'var(--p-color-success)';
@@ -80,6 +82,8 @@ const colorWarning = 'var(--p-color-warning)';
 
 const colorWarningFrosted = 'var(--p-color-warning-frosted)';
 
+const colorWarningFrostedSoft = 'var(--p-color-warning-frosted-soft)';
+
 const colorWarningMedium = 'var(--p-color-warning-medium)';
 
 const fontPorscheNext$1 = 'var(--p-font-porsche-next)';
@@ -136,6 +140,8 @@ const spacingFluidSm = 'var(--p-spacing-fluid-sm)';
 
 const spacingFluidXs = 'var(--p-spacing-fluid-xs)';
 
+const spacingStatic2Xs = 'var(--p-spacing-static-2xs)';
+
 const spacingStaticMd = 'var(--p-spacing-static-md)';
 
 const spacingStaticSm$1 = 'var(--p-spacing-static-sm)';
@@ -3769,7 +3775,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.0.0-rc.1"}]` // this part isn't covered by unit tests
+const prefix = `[Porsche Design System v${"4.0.0"}]` // this part isn't covered by unit tests
     ;
 const consoleError = (...messages) => {
     console.error(prefix, ...messages);
@@ -4135,105 +4141,33 @@ const weightMap = {
     bold: fontWeightBold,
 };
 
-/**
- * @css-variable {"name": "--p-banner-max-w", "description": "Defines the maximum width of the Banner.", "defaultValue": "100ch"}
- */
-const cssVarMaxWidth = '--p-banner-max-w';
-/**
- * @css-variable {"name": "--p-banner-top", "description": "Defines the distance from the top of the viewport. Only takes effect when the `position` property is set to `top` (at the respective breakpoint).", "defaultValue": "56px"}
- */
-const cssVarTop = '--p-banner-top';
-/**
- * @css-variable {"name": "--p-banner-bottom", "description": "Defines the distance from the bottom of the viewport. Only takes effect when the `position` property is set to `bottom` (at the respective breakpoint).", "defaultValue": "56px"}
- */
-const cssVarBottom = '--p-banner-bottom';
-/**
- * @css-variable {"name": "--p-banner-inset-x", "description": "Defines the horizontal offset of the Banner from the edges of the viewport.", "defaultValue": "max(22px, 10.625vw - 12px)"}
- */
-const cssVarInsetX = '--p-banner-inset-x';
-const cssVarPositionTop = '--p-banner-position-top'; // deprecated (aliased)
-const cssVarPositionBottom = '--p-banner-position-bottom'; // deprecated (aliased)
-const topBottomFallback = '56px';
-const cssVariableZIndex = '--p-internal-banner-z-index';
-const getComponentCss$18 = (isOpen, position, state, hasDismissButton) => {
-    const duration = isOpen ? 'moderate' : 'short';
-    const easing = isOpen ? 'in' : 'out';
-    const transition = `visibility 0s linear var(${cssVariableTransitionDuration},${isOpen ? '0s' : motionDurationMap[duration]}),${getTransition('transform', duration, easing)}`;
-    return getCss({
+const getFunctionalComponentNotificationBaseStyles = (state, hasAction, hasDismissButton, hasHeadingOrHeadingSlot) => {
+    return {
         '@global': {
-            ':host': {
-                display: 'contents',
-                ...addImportantToEachRule({
-                    ...hostHiddenStyles,
-                }),
-            },
-            ...preventFoucOfNestedElementsStyles,
-            'slot[name="heading"],h1,h2,h3,h4,h5,h6': {
-                all: 'unset',
-                display: 'block',
-                gridArea: '1/2',
-                font: `${fontWeightSemibold} ${typescaleSm$1} / ${leadingNormal$1} ${fontPorscheNext$1}`,
-                color: colorPrimary,
-            },
-            'slot[name="description"],p': {
+            ...(hasHeadingOrHeadingSlot && {
+                'slot[name="heading"],h1,h2,h3,h4,h5,h6': {
+                    all: 'unset',
+                    gridArea: '1/2',
+                    font: `${fontWeightSemibold} ${typescaleSm$1} / ${leadingNormal$1} ${fontPorscheNext$1}`,
+                    color: colorPrimary,
+                },
+            }),
+            'slot:not([name]),slot[name="description"],p': {
                 all: 'unset',
-                display: 'block',
-                gridArea: '2/2',
-                marginTop: spacingStaticXs$1,
+                gridArea: hasHeadingOrHeadingSlot ? '2/2' : '1/2',
+                marginTop: hasHeadingOrHeadingSlot ? spacingStaticXs$1 : '0px',
                 font: `${fontWeightNormal$1} ${typescaleSm$1} / ${leadingNormal$1} ${fontPorscheNext$1}`,
                 color: colorPrimary,
             },
-            '[popover]': {
-                all: 'unset',
-                position: 'fixed',
-                zIndex: `var(${cssVariableZIndex},${BANNER_Z_INDEX})`, // Fallback for browsers lacking `transition-behavior: allow-discrete` — keeps the banner visible during fade-out after leaving the top layer.
-                ...buildResponsiveStyles(position, (v) => ({
-                    ...(v === 'top' && {
-                        insetBlock: `var(${cssVarTop},var(${cssVarPositionTop},${topBottomFallback})) auto`,
-                        ...(!isOpen && {
-                            transform: `translate3d(-50%,calc(-100% - var(${cssVarTop},var(${cssVarPositionTop},${topBottomFallback}))),0)`,
-                        }),
-                    }),
-                    ...(v === 'bottom' && {
-                        insetBlock: `auto var(${cssVarBottom},var(${cssVarPositionBottom},${topBottomFallback}))`,
-                        ...(!isOpen && {
-                            transform: `translate3d(-50%,calc(var(${cssVarBottom},var(${cssVarPositionBottom},${topBottomFallback})) + 100%),0)`,
-                        }),
-                    }),
-                })),
-                left: '50vw',
-                width: `min(calc(100vw - 2 * var(${cssVarInsetX},${gridExtendedOffsetBase})),var(${cssVarMaxWidth},100ch))`,
-                '&:popover-open': {
-                    overlay: 'auto',
-                },
-                '&::backdrop': {
-                    display: 'none',
-                },
-                visibility: 'hidden', // element shall not be tabbable with keyboard after fade out transition has finished
-                pointerEvents: 'none', // element can't be interacted with mouse
-                ...(isOpen && {
-                    visibility: 'inherit',
-                    pointerEvents: 'inherit',
-                    transform: 'translate3d(-50%,0,0)',
-                }),
-                transition,
-                // during transition the element will be removed from top-layer immediately, resulting in other elements laying over (as of Mai 2024 only Chrome is fixed by this)
-                '@supports (transition-behavior: allow-discrete)': {
-                    transition: `${transition},${getTransition('overlay', duration, easing)} allow-discrete`,
-                },
-            },
         },
-        banner: {
+        notification: {
             display: 'grid',
-            gridTemplateColumns: `auto minmax(0, 1fr) auto auto`,
-            padding: spacingStaticMd,
+            gridTemplate: `repeat(3, auto) / auto minmax(0, 1fr) repeat(2, auto)`,
+            padding: `calc(${spacingStaticSm$1} + ${spacingFluidSm})`,
             borderRadius: `var(${legacyRadiusMedium}, ${radius2Xl})`,
             background: notificationBackgroundMap[state],
             WebkitBackdropFilter: blurFrosted,
             backdropFilter: blurFrosted,
-            boxShadow: shadowLg,
-            opacity: isOpen ? 1 : 0, // it's necessary to spit up opacity transition from [popover], otherwise frosted effect won't render
-            transition: getTransition('opacity', duration, easing),
             ...forcedColorsMediaQuery({
                 outline: '2px solid CanvasText',
                 outlineOffset: '-2px',
@@ -4241,7 +4175,7 @@ const getComponentCss$18 = (isOpen, position, state, hasDismissButton) => {
             '&::before': {
                 [getMediaQueryMin('s')]: {
                     gridArea: '1/1',
-                    placeSelf: 'center',
+                    placeSelf: hasHeadingOrHeadingSlot ? 'center' : 'flex-start',
                     content: '""',
                     width: '1.5rem',
                     height: '1.5rem',
@@ -4257,12 +4191,107 @@ const getComponentCss$18 = (isOpen, position, state, hasDismissButton) => {
         },
         ...(hasDismissButton && {
             dismiss: {
-                gridArea: `1/4/3`,
-                marginTop: `calc(-1 * ${spacingStaticXs$1})`,
-                marginInlineEnd: `calc(-1 * ${spacingStaticXs$1})`,
-                marginInlineStart: spacingStaticMd,
+                gridArea: `1/4/-1`,
+                alignSelf: 'flex-start',
+                marginBlock: `calc(-6 * ${spacingStatic2Xs})`,
+                marginInline: `${spacingStaticMd} calc(-6 * ${spacingStatic2Xs})`,
             },
         }),
+        ...(hasAction && {
+            action: {
+                gridArea: '3/1/auto/-1',
+                marginTop: spacingStaticMd,
+                [getMediaQueryMin('s')]: {
+                    gridArea: '1/3',
+                    marginTop: '0px',
+                    marginInlineStart: spacingStaticMd,
+                },
+            },
+        }),
+    };
+};
+
+/**
+ * @css-variable {"name": "--p-banner-max-w", "description": "Defines the maximum width of the Banner.", "defaultValue": "100ch"}
+ */
+const cssVarMaxWidth = '--p-banner-max-w';
+/**
+ * @css-variable {"name": "--p-banner-top", "description": "Defines the distance from the top of the viewport. Only takes effect when the `position` property is set to `top` (at the respective breakpoint).", "defaultValue": "56px"}
+ */
+const cssVarTop = '--p-banner-top';
+/**
+ * @css-variable {"name": "--p-banner-bottom", "description": "Defines the distance from the bottom of the viewport. Only takes effect when the `position` property is set to `bottom` (at the respective breakpoint).", "defaultValue": "56px"}
+ */
+const cssVarBottom = '--p-banner-bottom';
+/**
+ * @css-variable {"name": "--p-banner-inset-x", "description": "Defines the horizontal offset of the Banner from the edges of the viewport.", "defaultValue": "max(22px, 10.625vw - 12px)"}
+ */
+const cssVarInsetX = '--p-banner-inset-x';
+const cssVarPositionTop = '--p-banner-position-top'; // deprecated (aliased)
+const cssVarPositionBottom = '--p-banner-position-bottom'; // deprecated (aliased)
+const topBottomFallback = '56px';
+const cssVariableZIndex = '--_p-banner-a';
+const getComponentCss$18 = (isOpen, position, state, hasDismissButton, hasHeadingOrHeadingSlot) => {
+    const duration = isOpen ? 'moderate' : 'short';
+    const easing = isOpen ? 'in' : 'out';
+    const transition = `visibility 0s linear var(${cssVariableTransitionDuration},${isOpen ? '0s' : motionDurationMap[duration]}),${getTransition('transform', duration, easing)}`;
+    return getCss({
+        ...mergeDeep({
+            '@global': {
+                ':host': {
+                    display: 'contents',
+                    ...addImportantToEachRule({
+                        ...hostHiddenStyles,
+                    }),
+                },
+                ...preventFoucOfNestedElementsStyles,
+                '[popover]': {
+                    all: 'unset',
+                    position: 'fixed',
+                    zIndex: `var(${cssVariableZIndex},${BANNER_Z_INDEX})`, // Fallback for browsers lacking `transition-behavior: allow-discrete` — keeps the banner visible during fade-out after leaving the top layer.
+                    ...buildResponsiveStyles(position, (v) => ({
+                        ...(v === 'top' && {
+                            insetBlock: `var(${cssVarTop},var(${cssVarPositionTop},${topBottomFallback})) auto`,
+                            ...(!isOpen && {
+                                transform: `translate3d(-50%,calc(-100% - var(${cssVarTop},var(${cssVarPositionTop},${topBottomFallback}))),0)`,
+                            }),
+                        }),
+                        ...(v === 'bottom' && {
+                            insetBlock: `auto var(${cssVarBottom},var(${cssVarPositionBottom},${topBottomFallback}))`,
+                            ...(!isOpen && {
+                                transform: `translate3d(-50%,calc(var(${cssVarBottom},var(${cssVarPositionBottom},${topBottomFallback})) + 100%),0)`,
+                            }),
+                        }),
+                    })),
+                    left: '50vw',
+                    width: `min(calc(100vw - 2 * var(${cssVarInsetX},${gridExtendedOffsetBase})),var(${cssVarMaxWidth},100ch))`,
+                    '&:popover-open': {
+                        overlay: 'auto',
+                    },
+                    '&::backdrop': {
+                        display: 'none',
+                    },
+                    visibility: 'hidden', // element shall not be tabbable with keyboard after fade out transition has finished
+                    pointerEvents: 'none', // element can't be interacted with mouse
+                    ...(isOpen && {
+                        visibility: 'inherit',
+                        pointerEvents: 'inherit',
+                        transform: 'translate3d(-50%,0,0)',
+                    }),
+                    transition,
+                    // during transition the element will be removed from top-layer immediately, resulting in other elements laying over (as of Mai 2024 only Chrome is fixed by this)
+                    '@supports (transition-behavior: allow-discrete)': {
+                        transition: `${transition},${getTransition('overlay', duration, easing)} allow-discrete`,
+                    },
+                },
+            },
+        }, {
+            notification: {
+                boxShadow: shadowLg,
+                opacity: isOpen ? 1 : 0, // it's necessary to spit up opacity transition from [popover], otherwise frosted effect won't render
+                transition: getTransition('opacity', duration, easing),
+            },
+        }, getFunctionalComponentNotificationBaseStyles(state, false, hasDismissButton, hasHeadingOrHeadingSlot)),
     });
 };
 
@@ -4574,9 +4603,9 @@ const getLinkButtonStyles = (icon, iconSource, variant, hideLabel, isDisabledOrL
                 verticalAlign: 'top',
                 ...mergeDeep(buildResponsiveStyles(isCompact, (compactValue) => ({
                     [`${cssVariableInternalScaling}`]: compactValue ? 0.64285714 : 1,
-                    '--p-internal-border-radius': compactValue ? radiusLg : radiusXl,
+                    '--_p-link-button-a': compactValue ? radiusLg : radiusXl,
                 })), buildResponsiveStyles(hideLabel, (hideLabelValue) => ({
-                    borderRadius: addImportantToRule(`var(${legacyRadiusSmall}, ${hideLabelValue ? radiusFull : 'var(--p-internal-border-radius)'})`),
+                    borderRadius: addImportantToRule(`var(${legacyRadiusSmall}, ${hideLabelValue ? radiusFull : 'var(--_p-link-button-a)'})`),
                 }))),
                 ...addImportantToEachRule({
                     ...hostHiddenStyles,
@@ -4641,7 +4670,7 @@ const getLinkButtonStyles = (icon, iconSource, variant, hideLabel, isDisabledOrL
     };
 };
 
-const cssVariableInternalButtonScaling = '--p-internal-button-scaling';
+const cssVariableInternalButtonScaling = '--_p-button-a';
 const getComponentCss$15 = (icon, iconSource, variant, hideLabel, isDisabled, isLoading, isCompact) => {
     const disabledOrLoading = isDisabledOrLoading(isDisabled, isLoading);
     return getCss(mergeDeep(getLinkButtonStyles(icon, iconSource, variant, hideLabel, disabledOrLoading, false, isCompact, cssVariableInternalButtonScaling), {
@@ -4692,11 +4721,249 @@ const getComponentCss$15 = (icon, iconSource, variant, hideLabel, isDisabled, is
 };
 
 const palette = {
+    light: {
+        green: {
+            '50': 'hsl(115 29.7% 92.7%)',
+            '100': 'hsl(114 30.3% 87.1%)',
+            '200': 'hsl(116 29.2% 81.2%)',
+            '300': 'hsl(115 29.6% 75.5%)',
+            '400': 'hsl(116 29.9% 69.8%)',
+            '500': 'hsl(116 30.1% 64.1%)',
+            '600': 'hsl(115 30% 56.9%)',
+            '700': 'hsl(115 30.4% 49.6%)',
+            '800': 'hsl(115 40.7% 42.4%)',
+            '900': 'hsl(115 55.3% 35.1%)',
+            '950': 'hsl(115 77.5% 27.8%)',
+            '50a': 'hsl(115 77.5% 27.8% / 0.1)',
+            '100a': 'hsl(115 77.5% 27.8% / 0.18)',
+            '200a': 'hsl(115 77.5% 27.8% / 0.26)',
+            '300a': 'hsl(115 77.5% 27.8% / 0.34)',
+            '400a': 'hsl(115 77.5% 27.8% / 0.42)',
+            '500a': 'hsl(115 77.5% 27.8% / 0.5)',
+            '600a': 'hsl(115 77.5% 27.8% / 0.6)',
+            '700a': 'hsl(115 77.5% 27.8% / 0.7)',
+            '800a': 'hsl(115 77.5% 27.8% / 0.8)',
+            '900a': 'hsl(115 77.5% 27.8% / 0.9)',
+            '950a': 'hsl(115 77.5% 27.8%)',
+        },
+        red: {
+            '50': 'hsl(0 53.3% 94.1%)',
+            '100': 'hsl(358 55.6% 89.4%)',
+            '200': 'hsl(359 53.8% 84.7%)',
+            '300': 'hsl(358 54.9% 80%)',
+            '400': 'hsl(358 54% 75.3%)',
+            '500': 'hsl(357 54.7% 70.6%)',
+            '600': 'hsl(358 54.4% 64.7%)',
+            '700': 'hsl(357 54.3% 58.8%)',
+            '800': 'hsl(357 54.4% 52.7%)',
+            '900': 'hsl(357 61.5% 46.9%)',
+            '950': 'hsl(357 78% 41%)',
+            '50a': 'hsl(357 78% 41% / 0.1)',
+            '100a': 'hsl(357 78% 41% / 0.18)',
+            '200a': 'hsl(357 78% 41% / 0.26)',
+            '300a': 'hsl(357 78% 41% / 0.34)',
+            '400a': 'hsl(357 78% 41% / 0.42)',
+            '500a': 'hsl(357 78% 41% / 0.5)',
+            '600a': 'hsl(357 78% 41% / 0.6)',
+            '700a': 'hsl(357 78% 41% / 0.7)',
+            '800a': 'hsl(357 78% 41% / 0.8)',
+            '900a': 'hsl(357 78% 41% / 0.9)',
+            '950a': 'hsl(357 78% 41%)',
+        },
+        yellow: {
+            '50': 'hsl(25 51.5% 93.5%)',
+            '100': 'hsl(27 50.8% 88%)',
+            '200': 'hsl(27 50% 82.7%)',
+            '300': 'hsl(27 50.9% 77.6%)',
+            '400': 'hsl(27 50.4% 72.4%)',
+            '500': 'hsl(28 50.9% 67.3%)',
+            '600': 'hsl(28 50.5% 60.4%)',
+            '700': 'hsl(28 50.6% 53.9%)',
+            '800': 'hsl(27 56.2% 47.5%)',
+            '900': 'hsl(28 73.9% 40.6%)',
+            '950': 'hsl(28 97.7% 34.1%)',
+            '50a': 'hsl(28 97.7% 34.1% / 0.1)',
+            '100a': 'hsl(28 97.7% 34.1% / 0.18)',
+            '200a': 'hsl(28 97.7% 34.1% / 0.26)',
+            '300a': 'hsl(28 97.7% 34.1% / 0.34)',
+            '400a': 'hsl(28 97.7% 34.1% / 0.42)',
+            '500a': 'hsl(28 97.7% 34.1% / 0.5)',
+            '600a': 'hsl(28 97.7% 34.1% / 0.6)',
+            '700a': 'hsl(28 97.7% 34.1% / 0.7)',
+            '800a': 'hsl(28 97.7% 34.1% / 0.8)',
+            '900a': 'hsl(28 97.7% 34.1% / 0.9)',
+            '950a': 'hsl(28 97.7% 34.1%)',
+        },
+        blue: {
+            '50': 'hsl(229 84% 95.1%)',
+            '100': 'hsl(229 82.2% 91.2%)',
+            '200': 'hsl(228 84.6% 87.3%)',
+            '300': 'hsl(228 83.5% 83.3%)',
+            '400': 'hsl(228 82.9% 79.4%)',
+            '500': 'hsl(228 83.9% 75.7%)',
+            '600': 'hsl(228 82.7% 70.6%)',
+            '700': 'hsl(228 82.9% 65.7%)',
+            '800': 'hsl(228 83% 60.8%)',
+            '900': 'hsl(228 83.1% 55.9%)',
+            '950': 'hsl(228 83.2% 51%)',
+            '50a': 'hsl(228 83.2% 51% / 0.1)',
+            '100a': 'hsl(228 83.2% 51% / 0.18)',
+            '200a': 'hsl(228 83.2% 51% / 0.26)',
+            '300a': 'hsl(228 83.2% 51% / 0.34)',
+            '400a': 'hsl(228 83.2% 51% / 0.42)',
+            '500a': 'hsl(228 83.2% 51% / 0.5)',
+            '600a': 'hsl(228 83.2% 51% / 0.6)',
+            '700a': 'hsl(228 83.2% 51% / 0.7)',
+            '800a': 'hsl(228 83.2% 51% / 0.8)',
+            '900a': 'hsl(228 83.2% 51% / 0.9)',
+            '950a': 'hsl(228 83.2% 51%)',
+        },
+        grey: {
+            '50': 'hsl(240 10% 95%)',
+            '100': 'hsl(240 8.1% 92.7%)',
+            '200': 'hsl(225 5.7% 86.3%)',
+            '300': 'hsl(240 2.7% 78.2%)',
+            '400': 'hsl(240 1.9% 68.8%)',
+            '500': 'hsl(240 0.9% 57.6%)',
+            '600': 'hsl(240 0.8% 47.8%)',
+            '700': 'hsl(240 1.6% 37.8%)',
+            '800': 'hsl(240 2.2% 27.3%)',
+            '900': 'hsl(240 4.8% 16.5%)',
+            '950': 'hsl(225 66.7% 1.2%)',
+            '50a': 'hsl(234 9.8% 60% / 0.06)',
+            '100a': 'hsl(240 5% 70% / 0.148)',
+            '200a': 'hsl(236 6.5% 42% / 0.236)',
+            '300a': 'hsl(234 6% 32.9% / 0.324)',
+            '400a': 'hsl(233 6.6% 23.9% / 0.412)',
+            '500a': 'hsl(240 5.3% 14.9% / 0.5)',
+            '600a': 'hsl(240 6.1% 7% / 0.6)',
+            '700a': 'hsl(240 7.1% 11% / 0.7)',
+            '800a': 'hsl(240 8.7% 9% / 0.8)',
+            '900a': 'hsl(240 11.1% 7.1% / 0.9)',
+            '950a': 'hsl(240 15.4% 5.1%)',
+        },
+    },
     dark: {
+        green: {
+            '50': 'hsl(157 33.3% 10.6%)',
+            '100': 'hsl(158 47.1% 13.3%)',
+            '200': 'hsl(157 58% 15.9%)',
+            '300': 'hsl(157 64.6% 18.8%)',
+            '400': 'hsl(157 69.1% 21.6%)',
+            '500': 'hsl(157 72.6% 24.3%)',
+            '600': 'hsl(157 76.1% 27.8%)',
+            '700': 'hsl(157 78.7% 31.4%)',
+            '800': 'hsl(157 81.8% 34.5%)',
+            '900': 'hsl(157 83.5% 38%)',
+            '950': 'hsl(157 84.9% 41.6%)',
+            '50a': 'hsl(157 84.9% 41.6% / 0.1)',
+            '100a': 'hsl(157 84.9% 41.6% / 0.18)',
+            '200a': 'hsl(157 84.9% 41.6% / 0.26)',
+            '300a': 'hsl(157 84.9% 41.6% / 0.34)',
+            '400a': 'hsl(157 84.9% 41.6% / 0.42)',
+            '500a': 'hsl(157 84.9% 41.6% / 0.5)',
+            '600a': 'hsl(157 84.9% 41.6% / 0.6)',
+            '700a': 'hsl(157 84.9% 41.6% / 0.7)',
+            '800a': 'hsl(157 84.9% 41.6% / 0.8)',
+            '900a': 'hsl(157 84.9% 41.6% / 0.9)',
+            '950a': 'hsl(157 84.9% 41.6%)',
+        },
+        red: {
+            '50': 'hsl(0 28.1% 12.5%)',
+            '100': 'hsl(0 39.5% 16.9%)',
+            '200': 'hsl(0 45% 21.4%)',
+            '300': 'hsl(0 48.5% 25.9%)',
+            '400': 'hsl(0 51.6% 30%)',
+            '500': 'hsl(0 53.4% 34.5%)',
+            '600': 'hsl(0 54.9% 40%)',
+            '700': 'hsl(0 56.9% 45.5%)',
+            '800': 'hsl(0 60% 51%)',
+            '900': 'hsl(0 76.6% 56.5%)',
+            '950': 'hsl(0 96.9% 62%)',
+            '50a': 'hsl(0 96.9% 62% / 0.1)',
+            '100a': 'hsl(0 96.9% 62% / 0.18)',
+            '200a': 'hsl(0 96.9% 62% / 0.26)',
+            '300a': 'hsl(0 96.9% 62% / 0.34)',
+            '400a': 'hsl(0 96.9% 62% / 0.42)',
+            '500a': 'hsl(0 96.9% 62% / 0.5)',
+            '600a': 'hsl(0 96.9% 62% / 0.6)',
+            '700a': 'hsl(0 96.9% 62% / 0.7)',
+            '800a': 'hsl(0 96.9% 62% / 0.8)',
+            '900a': 'hsl(0 96.9% 62% / 0.9)',
+            '950a': 'hsl(0 96.9% 62%)',
+        },
+        yellow: {
+            '50': 'hsl(29 34.4% 12%)',
+            '100': 'hsl(28 45.7% 15.9%)',
+            '200': 'hsl(28 52.5% 19.8%)',
+            '300': 'hsl(28 57% 23.7%)',
+            '400': 'hsl(28 60.3% 27.6%)',
+            '500': 'hsl(28 62.7% 31.6%)',
+            '600': 'hsl(28 65.6% 36.5%)',
+            '700': 'hsl(28 66.8% 41.4%)',
+            '800': 'hsl(28 68.6% 46.3%)',
+            '900': 'hsl(28 72.7% 51.2%)',
+            '950': 'hsl(28 90.2% 56.1%)',
+            '50a': 'hsl(28 90.2% 56.1% / 0.1)',
+            '100a': 'hsl(28 90.2% 56.1% / 0.18)',
+            '200a': 'hsl(28 90.2% 56.1% / 0.26)',
+            '300a': 'hsl(28 90.2% 56.1% / 0.34)',
+            '400a': 'hsl(28 90.2% 56.1% / 0.42)',
+            '500a': 'hsl(28 90.2% 56.1% / 0.5)',
+            '600a': 'hsl(28 90.2% 56.1% / 0.6)',
+            '700a': 'hsl(28 90.2% 56.1% / 0.7)',
+            '800a': 'hsl(28 90.2% 56.1% / 0.8)',
+            '900a': 'hsl(28 90.2% 56.1% / 0.9)',
+            '950a': 'hsl(28 90.2% 56.1%)',
+        },
+        blue: {
+            '50': 'hsl(211 37.7% 12%)',
+            '100': 'hsl(210 52.5% 15.7%)',
+            '200': 'hsl(210 61.6% 19.4%)',
+            '300': 'hsl(210 66.4% 23.3%)',
+            '400': 'hsl(210 71% 27.1%)',
+            '500': 'hsl(210 73.4% 31%)',
+            '600': 'hsl(210 76.8% 35.5%)',
+            '700': 'hsl(210 78.6% 40.4%)',
+            '800': 'hsl(210 80.9% 45.1%)',
+            '900': 'hsl(210 81.9% 49.8%)',
+            '950': 'hsl(210 100% 54.5%)',
+            '50a': 'hsl(210 100% 54.5% / 0.1)',
+            '100a': 'hsl(210 100% 54.5% / 0.18)',
+            '200a': 'hsl(210 100% 54.5% / 0.26)',
+            '300a': 'hsl(210 100% 54.5% / 0.34)',
+            '400a': 'hsl(210 100% 54.5% / 0.42)',
+            '500a': 'hsl(210 100% 54.5% / 0.5)',
+            '600a': 'hsl(210 100% 54.5% / 0.6)',
+            '700a': 'hsl(210 100% 54.5% / 0.7)',
+            '800a': 'hsl(210 100% 54.5% / 0.8)',
+            '900a': 'hsl(210 100% 54.5% / 0.9)',
+            '950a': 'hsl(210 100% 54.5%)',
+        },
         grey: {
+            '50': 'hsl(225 66.7% 1.2%)',
+            '100': 'hsl(240 2% 10%)',
+            '200': 'hsl(240 1.3% 15.5%)',
+            '300': 'hsl(240 0.8% 23.7%)',
+            '400': 'hsl(240 0.6% 34.3%)',
+            '500': 'hsl(240 0.4% 47.6%)',
+            '600': 'hsl(240 0.5% 57.5%)',
+            '700': 'hsl(240 0.6% 67.3%)',
+            '800': 'hsl(240 0.9% 77.1%)',
+            '900': 'hsl(240 3% 87.1%)',
             '950': 'hsl(225 100% 99%)',
+            '50a': 'hsl(225 66.7% 1.2% / 0.08)',
             '100a': 'hsl(240 3.7% 26.5% / 0.154)',
-            '200a': 'hsl(240 2% 43% / 0.228)'},
+            '200a': 'hsl(240 2% 43% / 0.228)',
+            '300a': 'hsl(240 1.5% 61.8% / 0.302)',
+            '400a': 'hsl(240 2.9% 79.4% / 0.376)',
+            '500a': 'hsl(240 12.5% 96.9% / 0.45)',
+            '600a': 'hsl(240 12.5% 96.9% / 0.56)',
+            '700a': 'hsl(240 12.5% 96.9% / 0.67)',
+            '800a': 'hsl(240 12.5% 96.9% / 0.78)',
+            '900a': 'hsl(240 12.5% 96.9% / 0.89)',
+            '950a': 'hsl(225 100% 99%)',
+        },
     },
 };
 
@@ -5032,6 +5299,10 @@ const cssVarPaddingInlineStart = '--p-carousel-ps';
  * @css-variable {"name": "--p-carousel-pe", "description": "Defines the logical inline end padding of the carousel, the extra space is used to show parts of the next/previous slide. Needs to be used in combination with `--p-carousel-px` or `--p-carousel-ps`. When used then the prop `width` has no effect anymore.", "defaultValue": ""}
  */
 const cssVarPaddingInlineEnd = '--p-carousel-pe';
+/**
+ * @css-variable {"name": "--p-carousel-prev-next-color-scheme", "description": "Color Scheme applied to the navigation (prev/next buttons)"}
+ */
+const cssVariablePrevNextColorScheme = '--p-carousel-prev-next-color-scheme';
 const cssVariableGradientColorWidth = '--p-gradient-color-width';
 const carouselTransitionDuration = motionDurationModerate;
 const paginationInfiniteStartCaseClass = 'pagination--infinite';
@@ -5157,6 +5428,7 @@ const getComponentCss$13 = (gradient, hasHeading, hasDescription, hasControlsSlo
                 gap: spacingStaticXs$1,
                 alignSelf: 'flex-start', // relevant in case slot="header" becomes higher than nav group
             },
+            colorScheme: `var(${cssVariablePrevNextColorScheme})`,
         },
         btn: {
             padding: spacingStaticSm$1,
@@ -5360,7 +5632,7 @@ const cssVarCheckboxIconColor = '--p-checkbox-icon-color';
 /**
  * Internal CSS variables
  */
-const cssVarInternalCheckboxScaling = '--__p-checkbox-scaling';
+const cssVarInternalCheckboxScaling = '--_p-checkbox-scaling';
 
 const getCheckboxBaseStyles = (isDisabled, isLoading, isCompact, state) => {
     const { formStateBackgroundColor, formStateBorderColor, formStateBorderHoverColor } = getThemedFormStateColors(state);
@@ -5509,6 +5781,11 @@ const getFunctionalComponentLabelStyles = (isDisabled, isLoading, hideLabel, add
                 ...buildResponsiveStyles(hideLabel, (isHidden) => getHiddenTextJssStyle(isHidden, { marginTop: `calc(-1 * ${spacingStaticXs$1})` })),
                 marginTop: `calc(-1 * ${spacingStaticXs$1})`,
             },
+            '& > slot[name="label"]::slotted(*)': {
+                ...addImportantToEachRule({
+                    display: 'inline',
+                }),
+            },
             ...additionalDefaultJssStyle,
         },
         // .required
@@ -5611,7 +5888,7 @@ const cssVarButtonPurePadding = '--ref-p-input-slotted-padding';
  * @css-variable {"name": "--ref-p-input-slotted-margin", "description": "When slotting a `p-button-pure` or `p-link-pure` this variable needs to be set as `margin` in oder to adjust the spacings correctly."}
  */
 const cssVarButtonPureMargin = '--ref-p-input-slotted-margin';
-const cssVarInternalInputBaseScaling = '--p-internal-input-base-scaling';
+const cssVarInternalInputBaseScaling = '--_p-input-base-a';
 const getFunctionalComponentInputBaseStyles = (isDisabled, isLoading, hideLabel, state, isCompact, readOnly, additionalInputJssStyle, additionalHostJssStyle) => {
     const wrapperBorderWidth = '1px';
     const wrapperHeight = `calc(var(${cssVarInternalInputBaseScaling}) * 3.5rem)`;
@@ -5785,7 +6062,7 @@ const getIconJssStyle = (isOpen) => {
 const getOptionJssStyle = (componentName, cssVarScalingName) => {
     const gap = `calc(11.2px * (var(${cssVarScalingName}) - 0.64285714) + 4px)`;
     const paddingBlock = `calc(11.2px * (var(${cssVarScalingName}) - 0.64285714) + 4px)`;
-    const paddingInline = `var(--p-internal-${componentName}-padding-left, calc(16.8px * (var(${cssVarScalingName}) - 0.64285714) + 6px)) calc(16.8px * (var(${cssVarScalingName}) - 0.64285714) + 6px)`;
+    const paddingInline = `var(--_p-${componentName}-b, calc(16.8px * (var(${cssVarScalingName}) - 0.64285714) + 6px)) calc(16.8px * (var(${cssVarScalingName}) - 0.64285714) + 6px)`;
     return {
         display: 'flex',
         gap,
@@ -6022,11 +6299,11 @@ const getComponentCss$$ = (color, orientation) => {
 const cssVariableGridTemplate = '--p-drilldown-grid-template';
 const cssVariableGap = '--p-drilldown-gap';
 // private css variables
-const cssVarColorPrimary = '--_p-a';
-const cssVarColorBackgroundBase = '--_p-b';
-const cssVarColorBackgroundSurface = '--_p-c';
-const cssVarColorBackgroundShading = '--_p-d';
-const cssVarColorBackgroundScroller = '--_p-f';
+const cssVarColorPrimary = '--_p-drilldown-a';
+const cssVarColorBackgroundBase = '--_p-drilldown-b';
+const cssVarColorBackgroundSurface = '--_p-drilldown-c';
+const cssVarColorBackgroundShading = '--_p-drilldown-d';
+const cssVarColorBackgroundScroller = '--_p-drilldown-f';
 const scrollerWidthDesktop = 'clamp(338px, 210px + 18vw, 640px)';
 const mediaQueryMobile = getMediaQueryMax('s');
 const mediaQueryDesktop = getMediaQueryMin('s');
@@ -6621,7 +6898,7 @@ const getComponentCss$W = (size) => {
     });
 };
 
-const cssVarBackgroundColor = '--_a';
+const cssVarBackgroundColor = '--_p-dialog-a';
 const dialogHostJssStyle = (background) => {
     return {
         '--pds-internal-grid-outer-column': `calc(${spacingFluidLg} - ${gridGap})`,
@@ -6688,8 +6965,12 @@ const getDialogBackdropTransitionJssStyle = (isVisible, backdrop = 'blur') => {
 const getScrollerJssStyle = (position) => {
     // ensures scrollbar color is set correctly (e.g. when scrollbar is shown on backdrop, on flyout/modal surface or with Auto Dark Mode)
     const backgroundLight = 'rgba(255,255,255,.01)';
+    const backgroundDark = 'rgba(0,0,0,.01)';
     const background = {
-        light: backgroundLight};
+        light: backgroundLight,
+        dark: backgroundDark,
+        auto: backgroundLight,
+    };
     return {
         position: 'absolute',
         isolation: 'isolate', // creates new stacking context to show scrollbars on top of header/footer areas (on iOS/iPadOS)
@@ -6721,7 +7002,6 @@ const dialogGridJssStyle = () => {
         paddingTop: dialogPaddingTop,
         paddingBottom: dialogPaddingBottom,
         alignContent: 'flex-start',
-        overflow: 'clip',
     };
 };
 const getDialogColorJssStyle = () => {
@@ -6760,15 +7040,7 @@ const getDialogDismissButtonJssStyle = () => {
         marginTop: `calc(-1 * ${dialogPaddingTop} + ${spacingFluidSm})`,
         marginInlineEnd: spacingFluidSm,
         placeSelf: 'flex-start flex-end',
-        '&::after': {
-            content: '""',
-            display: 'block',
-            position: 'absolute',
-            inset: `calc(-1 * ${spacingFluidSm}) calc(-1 * ${spacingFluidSm}) -50px -50px`,
-            pointerEvents: 'none',
-            zIndex: -1,
-            background: `radial-gradient(circle at top right, hsla(from var(${cssVarBackgroundColor}) h s l / 0.35) 0%, transparent 70%)`,
-        },
+        boxShadow: `0px 0px 30px hsla(from var(${cssVarBackgroundColor}) h s l / 0.35)`
     };
 };
 const getSlotJssStyle = () => {
@@ -7054,8 +7326,8 @@ const getComponentCss$T = (name, source, color, size) => {
     });
 };
 
-const getComponentCss$S = (state, hasAction, hasDismissButton) => {
-    return getCss({
+const getComponentCss$S = (state, hasAction, hasDismissButton, hasHeadingOrHeadingSlot) => {
+    return getCss(mergeDeep({
         '@global': {
             ':host': {
                 display: 'block',
@@ -7064,71 +7336,8 @@ const getComponentCss$S = (state, hasAction, hasDismissButton) => {
                 }),
             },
             ...preventFoucOfNestedElementsStyles,
-            'slot[name="heading"],h1,h2,h3,h4,h5,h6': {
-                all: 'unset',
-                display: 'block',
-                gridArea: '1/2',
-                font: `${fontWeightSemibold} ${typescaleSm$1} / ${leadingNormal$1} ${fontPorscheNext$1}`,
-                color: colorPrimary,
-            },
-            'slot:not([name]),p': {
-                all: 'unset',
-                display: 'block',
-                gridArea: '2/2',
-                marginTop: spacingStaticXs$1,
-                font: `${fontWeightNormal$1} ${typescaleSm$1} / ${leadingNormal$1} ${fontPorscheNext$1}`,
-                color: colorPrimary,
-            },
         },
-        notification: {
-            display: 'grid',
-            gridTemplateColumns: `auto minmax(0, 1fr) auto auto`,
-            padding: spacingStaticMd,
-            borderRadius: `var(${legacyRadiusMedium}, ${radiusXl})`,
-            background: notificationBackgroundMap[state],
-            WebkitBackdropFilter: blurFrosted,
-            backdropFilter: blurFrosted,
-            ...forcedColorsMediaQuery({
-                outline: '2px solid CanvasText',
-                outlineOffset: '-2px',
-            }),
-            '&::before': {
-                [getMediaQueryMin('s')]: {
-                    gridArea: '1/1',
-                    placeSelf: 'center',
-                    content: '""',
-                    width: '1.5rem',
-                    height: '1.5rem',
-                    marginInlineEnd: spacingStaticSm$1,
-                    background: notificationColorMap[state],
-                    WebkitMask: `${notificationIconMap[state]} center/contain no-repeat`, // necessary for Sogou browser support :-)
-                    mask: `${notificationIconMap[state]} center/contain no-repeat`,
-                    ...forcedColorsMediaQuery({
-                        background: 'CanvasText',
-                    }),
-                },
-            },
-        },
-        ...(hasDismissButton && {
-            dismiss: {
-                gridArea: `1/4/3`,
-                marginTop: `calc(-1 * ${spacingStaticXs$1})`,
-                marginInlineEnd: `calc(-1 * ${spacingStaticXs$1})`,
-                marginInlineStart: spacingStaticMd,
-            },
-        }),
-        ...(hasAction && {
-            action: {
-                gridArea: '3/1/auto/-1',
-                marginTop: spacingStaticMd,
-                [getMediaQueryMin('s')]: {
-                    gridArea: '1/3',
-                    marginTop: 0,
-                    marginInlineStart: spacingStaticMd,
-                },
-            },
-        }),
-    });
+    }, getFunctionalComponentNotificationBaseStyles(state, hasAction, hasDismissButton, hasHeadingOrHeadingSlot)));
 };
 
 // CSS Variables defined in base input
@@ -7396,9 +7605,9 @@ const getComponentCss$G = (icon, iconSource, active, stretch, size, color, hideL
                     content: '""',
                     position: 'fixed',
                     insetBlock: offsetVertical,
-                    borderRadius: `var(${legacyRadiusSmall}, ${radiusSm})`,
                     ...buildResponsiveStyles(hideLabel, (hideLabelValue) => ({
                         insetInline: hideLabelValue ? offsetVertical : offsetHorizontal,
+                        borderRadius: `var(${legacyRadiusSmall}, ${hideLabelValue ? radiusFull : radiusLg})`,
                     })),
                 },
                 '&(a:focus-visible)::before': getFocusBaseStyles(),
@@ -7692,7 +7901,7 @@ const getComponentCss$E = (aspectRatio, size, weight, align, compact, hasGradien
     });
 };
 
-const cssVariableInternalLinkScaling = '--p-internal-link-scaling';
+const cssVariableInternalLinkScaling = '--_p-link-a';
 const getComponentCss$D = (icon, iconSource, variant, hideLabel, hasSlottedAnchor, isCompact) => {
     return getCss(mergeDeep(getLinkButtonStyles(icon, iconSource, variant, hideLabel, false, hasSlottedAnchor, isCompact, cssVariableInternalLinkScaling), {
         label: {
@@ -7858,7 +8067,7 @@ const getComponentCss$B = (model, safeZone, size, color) => {
     });
 };
 
-const cssVarInternalMultiSelectOptionScaling = '--p-internal-multi-select-option-scaling';
+const cssVarInternalMultiSelectOptionScaling = '--_p-multi-select-option-a';
 const getComponentCss$A = (isDisabled, selected) => {
     const checkboxDimension = `calc(var(${cssVarInternalCheckboxScaling}) * 1.75rem)`;
     const labelPaddingTop = `max(0px, calc((${checkboxDimension} - ${leadingNormal$1}) / 2))`;
@@ -7886,7 +8095,7 @@ const getComponentCss$A = (isDisabled, selected) => {
     });
 };
 
-const cssVarInternalOptgroupScaling = '--p-internal-optgroup-scaling';
+const cssVarInternalOptgroupScaling = '--_p-optgroup-a';
 const paddingBlock = `calc(11.2px * (var(${cssVarInternalOptgroupScaling}) - 0.64285714) + 4px)`;
 const paddingInline = `calc(16.8px * (var(${cssVarInternalOptgroupScaling}) - 0.64285714) + 6px)`;
 const gap = `calc(11.2px * (var(${cssVarInternalOptgroupScaling}) - 0.64285714) + 4px)`;
@@ -7898,8 +8107,8 @@ const getComponentCss$z = (isDisabled) => {
                 ...hostHiddenStyles,
             }),
             '::slotted(*)': {
-                '--p-internal-select-option-padding-left': paddingSlottedInlineStart,
-                '--p-internal-multi-select-option-padding-left': paddingSlottedInlineStart,
+                '--_p-select-option-b': paddingSlottedInlineStart,
+                '--_p-multi-select-option-b': paddingSlottedInlineStart,
             },
             '[role="group"]': {
                 display: 'flex',
@@ -7917,7 +8126,7 @@ const getComponentCss$z = (isDisabled) => {
     });
 };
 
-const cssVarInternalMultiSelectScaling = '--p-internal-multi-select-scaling';
+const cssVarInternalMultiSelectScaling = '--_p-multi-select-a';
 const getComponentCss$y = (isOpen, isDisabled, hideLabel, state, isCompact) => {
     return getCss({
         '@global': {
@@ -7960,8 +8169,8 @@ const getComponentCss$y = (isOpen, isDisabled, hideLabel, state, isCompact) => {
     });
 };
 
-const mediaQueryMinS$1 = getMediaQueryMin('s');
-const mediaQueryMaxS$1 = getMediaQueryMax('s');
+const mediaQueryMinS = getMediaQueryMin('s');
+const mediaQueryMaxS = getMediaQueryMax('s');
 const disabledCursorStyle = {
     cursor: 'default',
     pointerEvents: 'none', // prevents :hover (has no effect when forced), maybe we can remove it since CSS selectors already cover desired behavior
@@ -7987,7 +8196,7 @@ const getComponentCss$x = (activePage, pageTotal, showLastPage) => {
                 gap: spacingStaticXs$1,
                 margin: 0,
                 padding: 0,
-                [mediaQueryMinS$1]: {
+                [mediaQueryMinS]: {
                     gap: spacingStaticSm$1,
                 },
             },
@@ -7995,7 +8204,7 @@ const getComponentCss$x = (activePage, pageTotal, showLastPage) => {
                 listStyleType: 'none',
                 ...(pageTotal > 5 && {
                     // max 5 items including ellipsis at the same time on mobile
-                    [mediaQueryMaxS$1]: {
+                    [mediaQueryMaxS]: {
                         [activePage < 4
                             ? // we are at the start, so let's hide start ellipsis and 2 items before end ellipsis
                                 '&.ellip-start,&:nth-child(6),&:nth-child(7),&:not(.ellip):nth-child(8)'
@@ -8014,7 +8223,7 @@ const getComponentCss$x = (activePage, pageTotal, showLastPage) => {
                                 })),
                     },
                 }),
-                [mediaQueryMinS$1]: {
+                [mediaQueryMinS]: {
                     ...(pageTotal < 8
                         ? { '&.ellip': hiddenStyle }
                         : // max 7 items including ellipsis at the same time on tablet
@@ -8081,7 +8290,7 @@ const getComponentCss$x = (activePage, pageTotal, showLastPage) => {
     });
 };
 
-const cssVarInternalPinCodeScaling = '--p-internal-pin-code-scaling';
+const cssVarInternalPinCodeScaling = '--_p-pin-code-a';
 const getComponentCss$w = (hideLabel, state, isDisabled, isLoading, length, isCompact) => {
     const { formStateBackgroundColor, formStateBorderColor, formStateBorderHoverColor } = getThemedFormStateColors(state);
     const gap = `calc(11.2px * (var(${cssVarInternalPinCodeScaling}) - 0.64285714) + 4px)`;
@@ -8254,7 +8463,7 @@ const getComponentCss$v = () => {
     });
 };
 
-const cssVarInternalRadioGroupOptionScaling = '--p-internal-radio-group-option-scaling';
+const cssVarInternalRadioGroupOptionScaling = '--_p-radio-group-option-a';
 const checkedIcon = getInlineSVGBackgroundImage(`<circle cx="12" cy="12" r="6"/>`);
 const getComponentCss$u = (disabled, loading, state) => {
     const { formStateBackgroundColor, formStateBorderColor, formStateBorderHoverColor } = getThemedFormStateColors(state);
@@ -8358,7 +8567,7 @@ const getComponentCss$u = (disabled, loading, state) => {
     });
 };
 
-const cssVarInternalRadioGroupScaling = '--p-internal-radio-group-scaling';
+const cssVarInternalRadioGroupScaling = '--_p-radio-group-a';
 const groupRadioGroupDirectionJssStyles = {
     column: {
         flexFlow: 'column nowrap',
@@ -8605,7 +8814,7 @@ isSticky, hasScrollbar, isCompact) => {
     });
 };
 
-const cssVarInternalSegmentedControlScaling = '--p-internal-segmented-control-scaling';
+const cssVarInternalSegmentedControlScaling = '--_p-segmented-control-a';
 const getScalingVar = (compact) => `var(${cssVarInternalSegmentedControlScaling}, ${compact ? 0.5 : 1})`;
 const ICON_OFFSET = '4px';
 const ICON_SIZE = '1.5rem';
@@ -8690,7 +8899,10 @@ const getComponentCss$r = (isCompact, isDisabled, isSelected, state, hasIcon, ha
         }),
     });
 };
-const getComponentCss$q = (minWidth, maxWidth, columns, disabled, hideLabel, state) => {
+
+const MIN_ITEM_WIDTH = 46;
+const MAX_ITEM_WIDTH = 220;
+const getComponentCss$q = (minWidth, maxWidth, columns, disabled, hideLabel, state, noWrap) => {
     return getCss({
         '@global': {
             ':host': {
@@ -8703,11 +8915,13 @@ const getComponentCss$q = (minWidth, maxWidth, columns, disabled, hideLabel, sta
             'slot:not([name])': {
                 display: 'grid',
                 gridAutoRows: '1fr', // for equal height
-                ...buildResponsiveStyles(columns, (col) => ({
-                    gridTemplateColumns: col === 'auto'
-                        ? `repeat(auto-fit, ${maxWidth}px)`
-                        : `repeat(${col}, minmax(0, 1fr))`,
-                })),
+                ...(noWrap
+                    ? { gridAutoFlow: 'column', gridAutoColumns: 'max-content' }
+                    : buildResponsiveStyles(columns, (col) => ({
+                        gridTemplateColumns: col === 'auto'
+                            ? `repeat(auto-fit, ${(maxWidth > MAX_ITEM_WIDTH && MAX_ITEM_WIDTH) || (maxWidth < MIN_ITEM_WIDTH && minWidth) || maxWidth}px)`
+                            : `repeat(${col}, minmax(0, 1fr))`,
+                    }))),
                 gap: '6px',
             },
         },
@@ -8722,10 +8936,15 @@ const getComponentCss$q = (minWidth, maxWidth, columns, disabled, hideLabel, sta
         }),
         // .message
         ...getFunctionalComponentStateMessageStyles(state),
+        ...(noWrap && {
+            scroller: {
+                margin: `-${spacingStaticXs$1} 0`,
+            },
+        }),
     });
 };
 
-const cssVarInternalSelectOptionScaling = '--p-internal-select-option-scaling';
+const cssVarInternalSelectOptionScaling = '--_p-select-option-a';
 const getComponentCss$p = (isDisabled) => {
     return getCss({
         '@global': {
@@ -8750,7 +8969,7 @@ const getComponentCss$p = (isDisabled) => {
     });
 };
 
-const cssVarInternalSelectScaling = '--p-internal-select-scaling';
+const cssVarInternalSelectScaling = '--_p-select-a';
 const getComponentCss$o = (isOpen, isDisabled, hideLabel, state, isCompact) => {
     return getCss({
         '@global': {
@@ -9049,7 +9268,7 @@ const getComponentCss$k = (size) => {
     });
 };
 
-const cssVarInternalSwitchScaling = '--p-internal-switch-scaling';
+const cssVarInternalSwitchScaling = '--_p-switch-a';
 const getColors$1 = (checked, loading) => {
     return {
         buttonBorderColor: checked ? colorSuccessLow : colorContrastLow,
@@ -9190,10 +9409,10 @@ const cssVarScrollIndicatorTop = '--p-table-scroll-indicator-top';
  * @css-variable {"name": "--p-table-scroll-indicator-bottom", "description": "Defines the distance from the bottom of the viewport at which the scroll indicator sticks when scrolling up and `sticky` is enabled.", "defaultValue": "0px"}
  */
 const cssVarScrollIndicatorBottom = '--p-table-scroll-indicator-bottom';
-const cssVariableTablePadding = '--_a';
-const cssVariableTableHoverColor = '--_b';
-const cssVariableTableBorderColor = '--_c';
-const cssVariableTableBorderWidth = '--_d';
+const cssVariableTablePadding = '--_p-table-a';
+const cssVariableTableHoverColor = '--_p-table-b';
+const cssVariableTableBorderColor = '--_p-table-c';
+const cssVariableTableBorderWidth = '--_p-table-d';
 const getComponentCss$h = (isCompact, layout) => {
     return getCss({
         '@global': {
@@ -9204,9 +9423,8 @@ const getComponentCss$h = (isCompact, layout) => {
                     '--p-scroller-indicator-bottom': `var(${cssVarScrollIndicatorBottom},0px)`,
                     [cssVariableTableHoverColor]: colorFrosted,
                     [cssVariableTableBorderColor]: colorContrastLow,
-                    ...(isCompact && {
-                        [cssVariableTablePadding]: spacingStaticSm$1,
-                    }),
+                    [cssVariableTablePadding]: isCompact ? spacingStaticSm$1 : spacingFluidSm,
+                    [cssVariableTableBorderWidth]: '1px',
                     ...hostHiddenStyles,
                     font: `${fontWeightNormal$1} ${typescaleSm$1} / ${leadingNormal$1} ${fontPorscheNext$1}`,
                     color: colorPrimary,
@@ -9241,7 +9459,7 @@ const getComponentCss$g = (multiline) => {
                 display: 'table-cell',
                 verticalAlign: 'middle',
                 ...addImportantToEachRule({
-                    padding: `var(${cssVariableTablePadding}, ${spacingFluidSm})`,
+                    padding: `var(${cssVariableTablePadding})`,
                     margin: 0,
                     whiteSpace: multiline ? 'normal' : 'nowrap',
                     ...hostHiddenStyles,
@@ -9373,7 +9591,7 @@ const getComponentCss$c = () => {
             ':host': {
                 display: 'table-row',
                 ...addImportantToEachRule({
-                    borderBottom: `var(${cssVariableTableBorderWidth},1px) solid var(${cssVariableTableBorderColor})`,
+                    borderBottom: `var(${cssVariableTableBorderWidth}) solid var(${cssVariableTableBorderColor})`,
                     transition: getTransition('background'),
                     ...hostHiddenStyles,
                     ...hoverMediaQuery({
@@ -9388,7 +9606,8 @@ const getComponentCss$c = () => {
     });
 };
 
-const delayTabStyleAttribute = 'data-delay';
+const animatingAttribute = 'data-animating';
+
 const backgroundMap = {
     canvas: colorCanvas,
     surface: colorSurface,
@@ -9398,7 +9617,14 @@ const fontSizeText = {
     small: typescaleSm$1,
     medium: typescaleMd,
 };
-const getComponentCss$b = (background, size, isCompact) => {
+const getComponentCss$b = (background, size, isCompact, activeTabIndex) => {
+    const hasActive = activeTabIndex !== undefined;
+    // :nth-child is 1-based
+    const nth = hasActive ? activeTabIndex + 1 : 0;
+    const activeSelector = `&(a:nth-child(${nth})),&(button:nth-child(${nth}))`;
+    const notActiveHoverSelector = hasActive
+        ? `&(a:not(:nth-child(${nth})):hover),&(button:not(:nth-child(${nth})):hover)`
+        : '&(a:hover),&(button:hover)';
     return getCss({
         '@global': {
             ':host': {
@@ -9428,20 +9654,25 @@ const getComponentCss$b = (background, size, isCompact) => {
                     },
                     '&(a:focus-visible),&(button:focus-visible)': getFocusBaseStyles(),
                     ...hoverMediaQuery({
-                        '&(a:not([aria-current="true"]):hover),&(button:not([aria-selected="true"]):hover)': {
+                        [notActiveHoverSelector]: {
                             // Only applied on hover since applying it globally causes the active tab to visually flash when navigating in SPAs (where the tabs-bar persist across routes but the children tabs change).
                             transition: `${getTransition('color', 'moderate')}, ${getTransition('background-color')}`,
                             background: colorFrostedStrong,
                         },
                     }),
-                    // The data attribute is applied before the tabs switching animation runs in the utils to delay the selected tab styles until the animation is finished
-                    [`&(a[${delayTabStyleAttribute}]),&(button[${delayTabStyleAttribute}])`]: {
-                        transition: `${getTransition('color', 'moderate')}, background-color 0s linear ${durationMd$1}`, // the background shall be changed immediately after the bar transition has finished
-                    },
-                    '&(a[aria-current="true"]),&(button[aria-selected="true"])': {
-                        color: colorCanvas,
-                        background: colorPrimary,
-                    },
+                    ...(hasActive && {
+                        [activeSelector]: {
+                            color: colorCanvas,
+                        },
+                        // Transition color and background when animation is playing
+                        [`&(a:nth-child(${nth})[${animatingAttribute}]),&(button:nth-child(${nth})[${animatingAttribute}])`]: {
+                            transition: `${getTransition('color', 'moderate')}, background-color 0s linear ${durationMd$1}`,
+                        },
+                        // Apply background only when no active animation is playing
+                        [`&(a:nth-child(${nth}):not([${animatingAttribute}])),&(button:nth-child(${nth}):not([${animatingAttribute}]))`]: {
+                            background: colorPrimary,
+                        },
+                    }),
                     ...forcedColorsMediaQuery({
                         '&(a),&(button)': {
                             forcedColorAdjust: 'none',
@@ -9455,9 +9686,11 @@ const getComponentCss$b = (background, size, isCompact) => {
                             color: 'ButtonText',
                             boxShadow: 'inset 0 0 0 2px ButtonBorder',
                         },
-                        '&(a[aria-current="true"]),&(button[aria-selected="true"])': {
-                            transition: 'unset',
-                        },
+                        ...(hasActive && {
+                            [activeSelector]: {
+                                transition: 'unset',
+                            },
+                        }),
                     }),
                 },
             }),
@@ -9524,7 +9757,7 @@ const getComponentCss$9 = () => {
     });
 };
 
-const cssVarInternalTagDismissibleScaling = '--p-internal-tag-dismissible-scaling';
+const cssVarInternalTagDismissibleScaling = '--_p-tag-dismissible-a';
 const getComponentCss$8 = (hasLabel, isCompact) => {
     const buttonPaddingBlock = hasLabel
         ? `calc(16.8px * (var(${cssVarInternalTagDismissibleScaling}) - 0.64285714))`
@@ -9591,25 +9824,37 @@ const colorTextMap = {
     primary: colorCanvas,
     secondary: colorPrimary,
     info: colorCanvas,
+    'info-frosted': colorPrimary,
     success: colorCanvas,
+    'success-frosted': colorPrimary,
     warning: colorCanvas,
+    'warning-frosted': colorPrimary,
     error: colorCanvas,
+    'error-frosted': colorPrimary,
 };
 const colorBackgroundMap = {
     primary: colorPrimary,
     secondary: colorFrostedStrong,
     info: colorInfo,
+    'info-frosted': colorInfoFrosted,
     success: colorSuccess,
+    'success-frosted': colorSuccessFrosted,
     warning: colorWarning,
+    'warning-frosted': colorWarningFrosted,
     error: colorError,
+    'error-frosted': colorErrorFrosted,
 };
 const colorBackgroundHoverMap = {
     primary: colorContrastHigh,
     secondary: colorFrosted,
     info: colorInfoMedium,
+    'info-frosted': colorInfoFrostedSoft,
     success: colorSuccessMedium,
+    'success-frosted': colorSuccessFrostedSoft,
     warning: colorWarningMedium,
+    'warning-frosted': colorWarningFrostedSoft,
     error: colorErrorMedium,
+    'error-frosted': colorErrorFrostedSoft,
 };
 const getColors = (variant) => {
     return {
@@ -9635,10 +9880,16 @@ const getComponentCss$7 = (variant, compact, isFocusable, hasIcon) => {
                 position: 'relative', // necessary as relative anchor to ensure click area of optional slotted focusable element is in sync
                 display: 'flex',
                 gap: '2px',
-                padding: compact ? '1px 6px' : `${spacingStaticXs} 9px`,
+                padding: compact
+                    ? `${spacingStatic2Xs} ${spacingStaticSm$1}`
+                    : `${spacingStaticXs} calc(12 * ${spacingStatic2Xs})`,
                 borderRadius: `var(${legacyRadiusSmall}, calc(${compact ? '1px' : spacingStaticXs} + (${leadingNormal$1} / 2)))`, // ensures pill shape has a maximum border radius to support multiline.
                 font: `${fontWeightNormal$1} ${typescaleXs$1} / ${leadingNormal$1} ${fontPorscheNext$1}`,
-                ...(variant === 'secondary' && {
+                ...((variant === 'secondary' ||
+                    variant === 'info-frosted' ||
+                    variant === 'success-frosted' ||
+                    variant === 'warning-frosted' ||
+                    variant === 'error-frosted') && {
                     WebkitBackdropFilter: blurFrosted,
                     backdropFilter: blurFrosted,
                 }),
@@ -9693,13 +9944,13 @@ const isListTypeNumbered = (type) => {
     return type === 'numbered';
 };
 
-const cssVariablePaddingTop = '--p-internal-text-list-padding-top';
-const cssVariablePaddingBottom = '--p-internal-text-list-padding-bottom';
-const cssVariablePseudoSpace = '--p-internal-text-list-pseudo-space';
-const cssVariableUnorderedGridColumn = '--p-internal-text-list-unordered-grid-column';
-const cssVariableUnorderedPseudoContent = '--p-internal-text-list-unordered-pseudo-content';
-const cssVariableOrderedGridColumn = '--p-internal-text-list-ordered-grid-column';
-const cssVariableOrderedPseudoSuffix = '--p-internal-text-list-ordered-pseudo-suffix';
+const cssVariableOrderedGridColumn = '--_p-text-list-a';
+const cssVariableOrderedPseudoSuffix = '--_p-text-list-b';
+const cssVariablePaddingBottom = '--_p-text-list-c';
+const cssVariablePaddingTop = '--_p-text-list-d';
+const cssVariablePseudoSpace = '--_p-text-list-e';
+const cssVariableUnorderedGridColumn = '--_p-text-list-f';
+const cssVariableUnorderedPseudoContent = '--_p-text-list-g';
 const counter = 'p-text-list-counter';
 const getComponentCss$6 = (type) => {
     const isOrderedList = isListTypeOrdered(type);
@@ -9810,7 +10061,7 @@ const getComponentCss$4 = (size, weight, align, color, hyphens, ellipsis) => {
     });
 };
 
-const cssVarInternalTextareaScaling = '--p-internal-textarea-scaling';
+const cssVarInternalTextareaScaling = '--_p-textarea-a';
 /**
  * @css-variable {"name":"--p-textarea-field-sizing","description":"Controls CSS `field-sizing` for textarea.","defaultValue":"unset"}
  * @css-variable {"name":"--p-textarea-min-width","description":"Minimum width of the textarea.","defaultValue":"52px"}
@@ -9900,18 +10151,15 @@ const getComponentCss$3 = (isDisabled, isReadonly, hideLabel, state, isCompact,
     });
 };
 
-getMediaQueryMin('s');
-getMediaQueryMax('s');
-
 /**
  * @css-variable {"name": "--p-toast-position-bottom", "description": "Defines the spacing between the toast and the bottom edge of its container.", "defaultValue": "56px"}
  */
 const cssVariablePositionBottom = '--p-toast-position-bottom'; // CSS custom property exposed as public interface
-const cssVariablePositionBottomInternal = '--_p-a';
+const cssVariablePositionBottomInternal = '--_p-toast-a';
 const ANIMATION_DURATION = motionDurationModerate;
 const duration = ANIMATION_DURATION;
 const getKeyframes = (direction, outsideStyle) => {
-    const insideStyle = { opacity: 1, transform: 'translate3d(0,0,0)' };
+    const insideStyle = { transform: 'translate3d(0,0,0)' };
     return direction === 'in'
         ? {
             from: outsideStyle,
@@ -9923,7 +10171,6 @@ const getKeyframes = (direction, outsideStyle) => {
         };
 };
 const getKeyframesMobile = (direction, bottomVar) => getKeyframes(direction, {
-    opacity: 0,
     transform: `translate3d(0,calc(var(${bottomVar}) + 100%),0)`, // space before and after "+" is crucial
 });
 const toastCloseClassName = 'close';
@@ -10033,6 +10280,7 @@ exports.getFunctionalComponentLabelAfterStyles = getFunctionalComponentLabelAfte
 exports.getFunctionalComponentLabelStyles = getFunctionalComponentLabelStyles;
 exports.getFunctionalComponentLoadingMessageStyles = getFunctionalComponentLoadingMessageStyles;
 exports.getFunctionalComponentNoResultsOptionStyles = getFunctionalComponentNoResultsOptionStyles;
+exports.getFunctionalComponentNotificationBaseStyles = getFunctionalComponentNotificationBaseStyles;
 exports.getFunctionalComponentRequiredStyles = getFunctionalComponentRequiredStyles;
 exports.getFunctionalComponentStateMessageStyles = getFunctionalComponentStateMessageStyles;
 exports.getHeadingCss = getComponentCss$U;