@porsche-design-system/components-react 3.32.1-rc.0 → 3.33.0-rc.0

package/CHANGELOG.md

@@ -14,6 +14,20 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0),
 
 ## [Unreleased]
 
+## [3.33.0-rc.0] - 2026-03-04
+
+### Added
+
+- `Tag`: new `variant` property to define background colors which complies now with PDS `v4`
+  ([#4227](https://github.com/porsche-design-system/porsche-design-system/pull/4227))
+
+### Changed
+
+- `Tag`: deprecated `color` property, use `variant` property instead to define background colors which complies now with
+  PDS `v4` ([#4227](https://github.com/porsche-design-system/porsche-design-system/pull/4227))
+
+## [3.32.1] - 2026-02-24
+
 ## [3.32.1-rc.0] - 2026-02-20
 
 ### Fixed

package/cjs/lib/components/tag.wrapper.cjs

@@ -6,13 +6,13 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PTag = /*#__PURE__*/ react.forwardRef(({ color = 'background-surface', compact = false, icon, iconSource, theme, className, ...rest }, ref) => {
+const PTag = /*#__PURE__*/ react.forwardRef(({ color = 'background-surface', compact = false, icon, iconSource, theme, variant, className, ...rest }, ref) => {
     const elementRef = react.useRef(undefined);
     const WebComponentTag = hooks.usePrefix('p-tag');
-    const propsToSync = [color, compact, icon, iconSource, theme || hooks.useTheme()];
+    const propsToSync = [color, compact, icon, iconSource, theme || hooks.useTheme(), variant];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['color', 'compact', 'icon', 'iconSource', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['color', 'compact', 'icon', 'iconSource', 'theme', 'variant'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

package/esm/lib/components/tag.wrapper.d.ts

@@ -1,8 +1,8 @@
 import type { BaseProps } from '../../BaseProps';
-import type { TagColor, TagIcon, Theme } from '../types';
+import type { TagColor, TagIcon, Theme, TagVariant } from '../types';
 export type PTagProps = BaseProps & {
     /**
-     * Background color variations depending on theme property.
+     * @deprecated since v3.33.0, will be removed with next major release. Use `variant` prop instead. Background color variations depending on theme property.
      */
     color?: TagColor;
     /**
@@ -21,10 +21,14 @@ export type PTagProps = BaseProps & {
      * Adapts the tag color depending on the theme.
      */
     theme?: Theme;
+    /**
+     * Background color variations.
+     */
+    variant?: TagVariant;
 };
 export declare const PTag: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
-     * Background color variations depending on theme property.
+     * @deprecated since v3.33.0, will be removed with next major release. Use `variant` prop instead. Background color variations depending on theme property.
      */
     color?: TagColor;
     /**
@@ -43,6 +47,10 @@ export declare const PTag: import("react").ForwardRefExoticComponent<Omit<import
      * Adapts the tag color depending on the theme.
      */
     theme?: Theme;
+    /**
+     * Background color variations.
+     */
+    variant?: TagVariant;
 } & {
     children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLElement>>;

package/esm/lib/components/tag.wrapper.mjs

@@ -4,13 +4,13 @@ import { forwardRef, useRef } from 'react';
 import { usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 
-const PTag = /*#__PURE__*/ forwardRef(({ color = 'background-surface', compact = false, icon, iconSource, theme, className, ...rest }, ref) => {
+const PTag = /*#__PURE__*/ forwardRef(({ color = 'background-surface', compact = false, icon, iconSource, theme, variant, className, ...rest }, ref) => {
     const elementRef = useRef(undefined);
     const WebComponentTag = usePrefix('p-tag');
-    const propsToSync = [color, compact, icon, iconSource, theme || useTheme()];
+    const propsToSync = [color, compact, icon, iconSource, theme || useTheme(), variant];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['color', 'compact', 'icon', 'iconSource', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['color', 'compact', 'icon', 'iconSource', 'theme', 'variant'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

package/esm/lib/types.d.ts

@@ -1644,6 +1644,15 @@ declare const TAG_DISMISSIBLE_ARIA_ATTRIBUTES: readonly [
 ];
 export type TagDismissibleAriaAttribute = (typeof TAG_DISMISSIBLE_ARIA_ATTRIBUTES)[number];
 export type TagIcon = IconName;
+declare const TAG_VARIANTS: readonly [
+    "primary",
+    "secondary",
+    "info",
+    "warning",
+    "success",
+    "error"
+];
+export type TagVariant = (typeof TAG_VARIANTS)[number];
 declare const TAG_COLORS: readonly [
     "background-base",
     "background-surface",
@@ -1660,6 +1669,7 @@ declare const TAG_COLORS: readonly [
     "notification-success",
     "notification-error"
 ];
+/** @deprecated */
 export type TagColor = (typeof TAG_COLORS)[number];
 declare const TEXT_TAGS: readonly [
     "p",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@porsche-design-system/components-react",
-  "version": "3.32.1-rc.0",
+  "version": "3.33.0-rc.0",
   "description": "Porsche Design System is a component library designed to help developers create the best experience for software or services distributed by Dr. Ing. h.c. F. Porsche AG.",
   "keywords": [
     "porsche",
@@ -17,7 +17,7 @@
   "license": "SEE LICENSE IN LICENSE",
   "homepage": "https://designsystem.porsche.com",
   "dependencies": {
-    "@porsche-design-system/components-js": "3.32.1-rc.0"
+    "@porsche-design-system/components-js": "3.33.0-rc.0"
   },
   "peerDependencies": {
     "ag-grid-community": ">= 35.0.0 <36.0.0",

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

@@ -3643,7 +3643,7 @@ const hasShowPickerSupport = () => (hasDocument &&
     'showPicker' in HTMLInputElement.prototype &&
     CSS.supports('selector(::-webkit-calendar-picker-indicator)'));
 
-const prefix = `[Porsche Design System v${"3.32.1-rc.0"}]` // this part isn't covered by unit tests
+const prefix = `[Porsche Design System v${"3.33.0-rc.0"}]` // this part isn't covered by unit tests
     ;
 const consoleError = (...messages) => {
     console.error(prefix, ...messages); // eslint-disable-line no-console
@@ -6277,6 +6277,7 @@ const getFunctionalComponentInputBaseStyles = (disabled, loading, hideLabel, sta
                     [`${cssVarButtonPurePadding}`]: `calc(1px * ${buttonCompensation})`,
                     [`${cssVarButtonPureMargin}`]: `calc(-1px * ${buttonCompensation})`,
                 }),
+                // Alignment and direction of placeholder is set always to the right in RTL mode, because it is expected to have rtl language as placeholder value
                 '&(:dir(rtl)) input::placeholder': {
                     direction: 'rtl',
                     textAlign: 'end',
@@ -8231,7 +8232,11 @@ const getComponentCss$X = (disabled, loading, hideLabel, state, compact, readOnl
             '&::-webkit-inner-spin-button, &::-webkit-outer-spin-button': {
                 WebkitAppearance: 'none',
             },
-        }, {
+        }, 
+        // Overwrites direction to ltr for rtl languages to prevent issues with the email input, e.g. cursor jumping to the
+        // end of the input when typing in the middle of the text. This is necessary because email addresses are assumed
+        // to be always written in ltr direction and the input needs to accommodate that, even in rtl contexts.
+        {
             '&(:dir(rtl)) .wrapper, &(:dir(rtl)) input:placeholder-shown': {
                 direction: 'ltr',
             },
@@ -8370,7 +8375,11 @@ const getComponentCss$S = (disabled, loading, hideLabel, state, compact, readOnl
             '&::-webkit-inner-spin-button, &::-webkit-outer-spin-button': {
                 WebkitAppearance: 'none',
             },
-        }, {
+        }, 
+        // Overwrites direction to ltr for rtl languages to prevent issues with the tel input, e.g. cursor jumping to the
+        // end of the input when typing in the middle of the text. This is necessary because tel values are assumed
+        // to be always written in ltr direction and the input needs to accommodate that, even in rtl contexts.
+        {
             '&(:dir(rtl)) .wrapper, &(:dir(rtl)) input:placeholder-shown': {
                 direction: 'ltr',
             },
@@ -8455,7 +8464,11 @@ const getComponentCss$P = (disabled, loading, hideLabel, state, compact, readOnl
             '&::-webkit-inner-spin-button, &::-webkit-outer-spin-button': {
                 WebkitAppearance: 'none',
             },
-        }, {
+        }, 
+        // Overwrites direction to ltr for rtl languages to prevent issues with the url input, e.g. cursor jumping to the
+        // end of the input when typing in the middle of the text. This is necessary because url addresses are assumed
+        // to be always written in ltr direction and the input needs to accommodate that, even in rtl contexts.
+        {
             '&(:dir(rtl)) .wrapper, &(:dir(rtl)) input:placeholder-shown': {
                 direction: 'ltr',
             },

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

@@ -3446,7 +3446,7 @@ const hasShowPickerSupport = () => (hasDocument &&
     'showPicker' in HTMLInputElement.prototype &&
     CSS.supports('selector(::-webkit-calendar-picker-indicator)'));
 
-const prefix = `[Porsche Design System v${"3.32.1-rc.0"}]` // this part isn't covered by unit tests
+const prefix = `[Porsche Design System v${"3.33.0-rc.0"}]` // this part isn't covered by unit tests
     ;
 const consoleError$1 = (...messages) => {
     console.error(prefix, ...messages); // eslint-disable-line no-console
@@ -3974,6 +3974,14 @@ const getSwitchButtonAriaAttributes = (isDisabled, isLoading, isChecked) => {
 const isSortable = (active, direction) => {
     return active !== undefined && direction !== undefined;
 };
+const VARIANT_TO_COLOR_MAP = {
+    primary: 'primary',
+    secondary: 'background-frosted',
+    info: 'notification-info-soft',
+    warning: 'notification-warning-soft',
+    success: 'notification-success-soft',
+    error: 'notification-error-soft',
+};
 const isType = (inputType, typeToValidate) => inputType === typeToValidate;
 const hasLocateAction = (icon) => icon === 'locate';
 const showCustomCalendarOrTimeIndicator = (isCalendar, isTime) => {
@@ -3993,6 +4001,7 @@ exports.DISPLAY_TAGS = DISPLAY_TAGS;
 exports.HEADING_TAGS = HEADING_TAGS;
 exports.HEADLINE_TAGS = HEADLINE_TAGS;
 exports.TEXT_TAGS = TEXT_TAGS;
+exports.VARIANT_TO_COLOR_MAP = VARIANT_TO_COLOR_MAP;
 exports.anchorSlot = anchorSlot;
 exports.attributeMutationMap = attributeMutationMap;
 exports.buildCrestImgSrc = buildCrestImgSrc;

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/components/tag.wrapper.cjs

@@ -7,20 +7,20 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 var tag = require('../dsr-components/tag.cjs');
 
-const PTag = /*#__PURE__*/ react.forwardRef(({ color = 'background-surface', compact = false, icon, iconSource, theme, className, children, ...rest }, ref) => {
+const PTag = /*#__PURE__*/ react.forwardRef(({ color = 'background-surface', compact = false, icon, iconSource, theme, variant, className, children, ...rest }, ref) => {
     const elementRef = react.useRef(undefined);
     const WebComponentTag = hooks.usePrefix('p-tag');
-    const propsToSync = [color, compact, icon, iconSource, theme || hooks.useTheme()];
+    const propsToSync = [color, compact, icon, iconSource, theme || hooks.useTheme(), variant];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['color', 'compact', 'icon', 'iconSource', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['color', 'compact', 'icon', 'iconSource', 'theme', 'variant'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsxRuntime.jsx(tag.DSRTag, { color, compact, icon, iconSource, theme: theme || hooks.useTheme(), children })),
+                children: (jsxRuntime.jsx(tag.DSRTag, { color, compact, icon, iconSource, theme: theme || hooks.useTheme(), variant, children })),
             }
             : {
                 children,

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

@@ -21,7 +21,8 @@ id, label: label$1, description, loading, initialLoading, required, disabled, st
 // refElement,
 start, end, }) => {
     const { namedSlotChildren } = splitChildren.splitChildren(children);
-    return (jsxRuntime.jsxs("div", { className: "root", children: [jsxRuntime.jsx(label.Label, { hasLabel: !!label$1 || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0, hasDescription: !!description || namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0, host: null, label: label$1, description: description, htmlFor: id, isRequired: required, isLoading: loading, isDisabled: disabled }), jsxRuntime.jsxs("div", { className: "wrapper", children: [jsxRuntime.jsx("slot", { name: "start" }), start, jsxRuntime.jsx("input", { "aria-describedby": loading ? loadingMessage.loadingId : `${utilsEntry.descriptionId} ${stateMessage.messageId}`, "aria-invalid": state === 'error' ? 'true' : null, "aria-disabled": disabled || loading ? 'true' : null, "aria-readonly": readOnly ? 'true' : null, id: id, name: name, form: form, type: type, required: required, placeholder: placeholder || null, maxLength: maxLength, minLength: minLength, spellCheck: spellCheck, max: max, min: min, step: step, defaultValue: value, readOnly: readOnly, autoComplete: autoComplete, disabled: disabled, pattern: pattern, multiple: multiple, dir: "auto" }), end, jsxRuntime.jsx("slot", { name: "end" }), loading && jsxRuntime.jsx(spinner_wrapper.PSpinner, { className: "spinner", size: "inherit", theme: theme, "aria-hidden": "true" })] }), jsxRuntime.jsx(stateMessage.StateMessage, { hasMessage: (message || namedSlotChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(state), state: state, message: message, theme: theme, host: null }), jsxRuntime.jsx(loadingMessage.LoadingMessage, { loading: loading, initialLoading: initialLoading })] }));
+    return (jsxRuntime.jsxs("div", { className: "root", children: [jsxRuntime.jsx(label.Label, { hasLabel: !!label$1 || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0, hasDescription: !!description || namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0, host: null, label: label$1, description: description, htmlFor: id, isRequired: required, isLoading: loading, isDisabled: disabled }), jsxRuntime.jsxs("div", { className: "wrapper", children: [jsxRuntime.jsx("slot", { name: "start" }), start, jsxRuntime.jsx("input", { "aria-describedby": loading ? loadingMessage.loadingId : `${utilsEntry.descriptionId} ${stateMessage.messageId}`, "aria-invalid": state === 'error' ? 'true' : null, "aria-disabled": disabled || loading ? 'true' : null, "aria-readonly": readOnly ? 'true' : null, id: id, name: name, form: form, type: type, required: required, placeholder: placeholder || null, maxLength: maxLength, minLength: minLength, spellCheck: spellCheck, max: max, min: min, step: step, defaultValue: value, readOnly: readOnly, autoComplete: autoComplete, disabled: disabled, pattern: pattern, multiple: multiple, dir: "auto" // This is the default: let the browser decide in which direction the value should be placed.
+                     }), end, jsxRuntime.jsx("slot", { name: "end" }), loading && jsxRuntime.jsx(spinner_wrapper.PSpinner, { className: "spinner", size: "inherit", theme: theme, "aria-hidden": "true" })] }), jsxRuntime.jsx(stateMessage.StateMessage, { hasMessage: (message || namedSlotChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(state), state: state, message: message, theme: theme, host: null }), jsxRuntime.jsx(loadingMessage.LoadingMessage, { loading: loading, initialLoading: initialLoading })] }));
 };
 
 exports.InputBase = InputBase;

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

@@ -25,7 +25,11 @@ class DSRTag extends react.Component {
             'notification-success': 'notification-success-soft',
             'notification-error': 'notification-error-soft',
         };
-        const style = minifyCss.minifyCss(stylesEntry.getTagCss((deprecationMap[this.props.color] || this.props.color), this.props.compact, !!utilsEntry.getDirectChildHTMLElement(null, 'a,button'), hasIcon, this.props.theme));
+        // Resolve effective color: variant takes precedence over color
+        const resolvedColor = this.props.variant
+            ? utilsEntry.VARIANT_TO_COLOR_MAP[this.props.variant]
+            : (deprecationMap[this.props.color] || this.props.color);
+        const style = minifyCss.minifyCss(stylesEntry.getTagCss(resolvedColor, this.props.compact, !!utilsEntry.getDirectChildHTMLElement(null, 'a,button'), hasIcon, this.props.theme));
         return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs("span", { children: [hasIcon && (jsxRuntime.jsx(icon_wrapper.PIcon, { className: "icon", name: this.props.icon, source: this.props.iconSource, color: "primary", size: "x-small", theme: this.props.theme, "aria-hidden": "true" })), jsxRuntime.jsx("slot", {})] })] }), this.props.children] }));
     }
 }

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

@@ -3641,7 +3641,7 @@ const hasShowPickerSupport = () => (hasDocument &&
     'showPicker' in HTMLInputElement.prototype &&
     CSS.supports('selector(::-webkit-calendar-picker-indicator)'));
 
-const prefix = `[Porsche Design System v${"3.32.1-rc.0"}]` // this part isn't covered by unit tests
+const prefix = `[Porsche Design System v${"3.33.0-rc.0"}]` // this part isn't covered by unit tests
     ;
 const consoleError = (...messages) => {
     console.error(prefix, ...messages); // eslint-disable-line no-console
@@ -6275,6 +6275,7 @@ const getFunctionalComponentInputBaseStyles = (disabled, loading, hideLabel, sta
                     [`${cssVarButtonPurePadding}`]: `calc(1px * ${buttonCompensation})`,
                     [`${cssVarButtonPureMargin}`]: `calc(-1px * ${buttonCompensation})`,
                 }),
+                // Alignment and direction of placeholder is set always to the right in RTL mode, because it is expected to have rtl language as placeholder value
                 '&(:dir(rtl)) input::placeholder': {
                     direction: 'rtl',
                     textAlign: 'end',
@@ -8229,7 +8230,11 @@ const getComponentCss$X = (disabled, loading, hideLabel, state, compact, readOnl
             '&::-webkit-inner-spin-button, &::-webkit-outer-spin-button': {
                 WebkitAppearance: 'none',
             },
-        }, {
+        }, 
+        // Overwrites direction to ltr for rtl languages to prevent issues with the email input, e.g. cursor jumping to the
+        // end of the input when typing in the middle of the text. This is necessary because email addresses are assumed
+        // to be always written in ltr direction and the input needs to accommodate that, even in rtl contexts.
+        {
             '&(:dir(rtl)) .wrapper, &(:dir(rtl)) input:placeholder-shown': {
                 direction: 'ltr',
             },
@@ -8368,7 +8373,11 @@ const getComponentCss$S = (disabled, loading, hideLabel, state, compact, readOnl
             '&::-webkit-inner-spin-button, &::-webkit-outer-spin-button': {
                 WebkitAppearance: 'none',
             },
-        }, {
+        }, 
+        // Overwrites direction to ltr for rtl languages to prevent issues with the tel input, e.g. cursor jumping to the
+        // end of the input when typing in the middle of the text. This is necessary because tel values are assumed
+        // to be always written in ltr direction and the input needs to accommodate that, even in rtl contexts.
+        {
             '&(:dir(rtl)) .wrapper, &(:dir(rtl)) input:placeholder-shown': {
                 direction: 'ltr',
             },
@@ -8453,7 +8462,11 @@ const getComponentCss$P = (disabled, loading, hideLabel, state, compact, readOnl
             '&::-webkit-inner-spin-button, &::-webkit-outer-spin-button': {
                 WebkitAppearance: 'none',
             },
-        }, {
+        }, 
+        // Overwrites direction to ltr for rtl languages to prevent issues with the url input, e.g. cursor jumping to the
+        // end of the input when typing in the middle of the text. This is necessary because url addresses are assumed
+        // to be always written in ltr direction and the input needs to accommodate that, even in rtl contexts.
+        {
             '&(:dir(rtl)) .wrapper, &(:dir(rtl)) input:placeholder-shown': {
                 direction: 'ltr',
             },

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

@@ -3444,7 +3444,7 @@ const hasShowPickerSupport = () => (hasDocument &&
     'showPicker' in HTMLInputElement.prototype &&
     CSS.supports('selector(::-webkit-calendar-picker-indicator)'));
 
-const prefix = `[Porsche Design System v${"3.32.1-rc.0"}]` // this part isn't covered by unit tests
+const prefix = `[Porsche Design System v${"3.33.0-rc.0"}]` // this part isn't covered by unit tests
     ;
 const consoleError$1 = (...messages) => {
     console.error(prefix, ...messages); // eslint-disable-line no-console
@@ -3972,6 +3972,14 @@ const getSwitchButtonAriaAttributes = (isDisabled, isLoading, isChecked) => {
 const isSortable = (active, direction) => {
     return active !== undefined && direction !== undefined;
 };
+const VARIANT_TO_COLOR_MAP = {
+    primary: 'primary',
+    secondary: 'background-frosted',
+    info: 'notification-info-soft',
+    warning: 'notification-warning-soft',
+    success: 'notification-success-soft',
+    error: 'notification-error-soft',
+};
 const isType = (inputType, typeToValidate) => inputType === typeToValidate;
 const hasLocateAction = (icon) => icon === 'locate';
 const showCustomCalendarOrTimeIndicator = (isCalendar, isTime) => {
@@ -3987,4 +3995,4 @@ const getTextTagType = (host, tag) => {
     return tag;
 };
 
-export { DISPLAY_TAGS, HEADING_TAGS, HEADLINE_TAGS, ItemType, TEXT_TAGS, anchorSlot, attributeMutationMap, buildCrestImgSrc, buildCrestSrcSet, buildFlagUrl, buildIconUrl, buildImgSrc, buildSrcSet, consoleError$1 as consoleError, createPaginationItems, createRange, crestSize, descriptionId, displaySizeToTagMap, getButtonAriaAttributes, getButtonBaseAriaAttributes, getButtonPureAriaAttributes, getCDNBaseURL, getClosestHTMLElement, getComboboxAriaAttributes, getContentAriaAttributes, getCurrentActivePage, getDirectChildHTMLElement, getDisplayTagType, getFieldsetAriaAttributes, getHTMLElement, getHasNativePopoverSupport, getHeadingTagType, getHeadlineTagType, getIconColor, getInlineNotificationIconName, getInnerManifest, getSegmentedControlItemAriaAttributes, getSelectedOptionMap, getStepperHorizontalIconName, getSvgUrl, getSwitchButtonAriaAttributes, getTagName, getTagNameWithoutPrefix, getTextTagType, getTotalPages, hasDocument, hasLocateAction, hasShowPickerSupport, hasSpecificDirectChildTag, hasVisibleIcon, hasWindow$1 as hasWindow, headerSlot, internalDrilldown, isCurrentInput, isCustomDropdown, isDisabledOrLoading, isElementOfKind, isInfinitePagination, isListTypeOrdered, isScrollable, isSortable, isStateCompleteOrWarning, isTouchDevice, isType, isUrl, isWithinForm, labelId, observedNodesMap, parseAndGetAriaAttributes, parseJSONAttribute, scrollAreaClass, showCustomCalendarOrTimeIndicator, supportsConstructableStylesheets, supportsNativePopover, tempDiv, tempIcon, tempLabel, traverseTreeAndUpdateState, updateDrilldownItemState };
+export { DISPLAY_TAGS, HEADING_TAGS, HEADLINE_TAGS, ItemType, TEXT_TAGS, VARIANT_TO_COLOR_MAP, anchorSlot, attributeMutationMap, buildCrestImgSrc, buildCrestSrcSet, buildFlagUrl, buildIconUrl, buildImgSrc, buildSrcSet, consoleError$1 as consoleError, createPaginationItems, createRange, crestSize, descriptionId, displaySizeToTagMap, getButtonAriaAttributes, getButtonBaseAriaAttributes, getButtonPureAriaAttributes, getCDNBaseURL, getClosestHTMLElement, getComboboxAriaAttributes, getContentAriaAttributes, getCurrentActivePage, getDirectChildHTMLElement, getDisplayTagType, getFieldsetAriaAttributes, getHTMLElement, getHasNativePopoverSupport, getHeadingTagType, getHeadlineTagType, getIconColor, getInlineNotificationIconName, getInnerManifest, getSegmentedControlItemAriaAttributes, getSelectedOptionMap, getStepperHorizontalIconName, getSvgUrl, getSwitchButtonAriaAttributes, getTagName, getTagNameWithoutPrefix, getTextTagType, getTotalPages, hasDocument, hasLocateAction, hasShowPickerSupport, hasSpecificDirectChildTag, hasVisibleIcon, hasWindow$1 as hasWindow, headerSlot, internalDrilldown, isCurrentInput, isCustomDropdown, isDisabledOrLoading, isElementOfKind, isInfinitePagination, isListTypeOrdered, isScrollable, isSortable, isStateCompleteOrWarning, isTouchDevice, isType, isUrl, isWithinForm, labelId, observedNodesMap, parseAndGetAriaAttributes, parseJSONAttribute, scrollAreaClass, showCustomCalendarOrTimeIndicator, supportsConstructableStylesheets, supportsNativePopover, tempDiv, tempIcon, tempLabel, traverseTreeAndUpdateState, updateDrilldownItemState };

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

@@ -5,20 +5,20 @@ import { usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../
 import { syncRef } from '../../utils.mjs';
 import { DSRTag } from '../dsr-components/tag.mjs';
 
-const PTag = /*#__PURE__*/ forwardRef(({ color = 'background-surface', compact = false, icon, iconSource, theme, className, children, ...rest }, ref) => {
+const PTag = /*#__PURE__*/ forwardRef(({ color = 'background-surface', compact = false, icon, iconSource, theme, variant, className, children, ...rest }, ref) => {
     const elementRef = useRef(undefined);
     const WebComponentTag = usePrefix('p-tag');
-    const propsToSync = [color, compact, icon, iconSource, theme || useTheme()];
+    const propsToSync = [color, compact, icon, iconSource, theme || useTheme(), variant];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['color', 'compact', 'icon', 'iconSource', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['color', 'compact', 'icon', 'iconSource', 'theme', 'variant'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsx(DSRTag, { color, compact, icon, iconSource, theme: theme || useTheme(), children })),
+                children: (jsx(DSRTag, { color, compact, icon, iconSource, theme: theme || useTheme(), variant, children })),
             }
             : {
                 children,

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

@@ -19,7 +19,8 @@ id, label, description, loading, initialLoading, required, disabled, state, mess
 // refElement,
 start, end, }) => {
     const { namedSlotChildren } = splitChildren(children);
-    return (jsxs("div", { className: "root", children: [jsx(Label, { hasLabel: !!label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0, hasDescription: !!description || namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0, host: null, label: label, description: description, htmlFor: id, isRequired: required, isLoading: loading, isDisabled: disabled }), jsxs("div", { className: "wrapper", children: [jsx("slot", { name: "start" }), start, jsx("input", { "aria-describedby": loading ? loadingId : `${descriptionId} ${messageId}`, "aria-invalid": state === 'error' ? 'true' : null, "aria-disabled": disabled || loading ? 'true' : null, "aria-readonly": readOnly ? 'true' : null, id: id, name: name, form: form, type: type, required: required, placeholder: placeholder || null, maxLength: maxLength, minLength: minLength, spellCheck: spellCheck, max: max, min: min, step: step, defaultValue: value, readOnly: readOnly, autoComplete: autoComplete, disabled: disabled, pattern: pattern, multiple: multiple, dir: "auto" }), end, jsx("slot", { name: "end" }), loading && jsx(PSpinner, { className: "spinner", size: "inherit", theme: theme, "aria-hidden": "true" })] }), jsx(StateMessage, { hasMessage: (message || namedSlotChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(state), state: state, message: message, theme: theme, host: null }), jsx(LoadingMessage, { loading: loading, initialLoading: initialLoading })] }));
+    return (jsxs("div", { className: "root", children: [jsx(Label, { hasLabel: !!label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0, hasDescription: !!description || namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0, host: null, label: label, description: description, htmlFor: id, isRequired: required, isLoading: loading, isDisabled: disabled }), jsxs("div", { className: "wrapper", children: [jsx("slot", { name: "start" }), start, jsx("input", { "aria-describedby": loading ? loadingId : `${descriptionId} ${messageId}`, "aria-invalid": state === 'error' ? 'true' : null, "aria-disabled": disabled || loading ? 'true' : null, "aria-readonly": readOnly ? 'true' : null, id: id, name: name, form: form, type: type, required: required, placeholder: placeholder || null, maxLength: maxLength, minLength: minLength, spellCheck: spellCheck, max: max, min: min, step: step, defaultValue: value, readOnly: readOnly, autoComplete: autoComplete, disabled: disabled, pattern: pattern, multiple: multiple, dir: "auto" // This is the default: let the browser decide in which direction the value should be placed.
+                     }), end, jsx("slot", { name: "end" }), loading && jsx(PSpinner, { className: "spinner", size: "inherit", theme: theme, "aria-hidden": "true" })] }), jsx(StateMessage, { hasMessage: (message || namedSlotChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(state), state: state, message: message, theme: theme, host: null }), jsx(LoadingMessage, { loading: loading, initialLoading: initialLoading })] }));
 };
 
 export { InputBase };

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

@@ -4,7 +4,7 @@ import '../../provider.mjs';
 import { splitChildren } from '../../splitChildren.mjs';
 import { minifyCss } from '../../minifyCss.mjs';
 import { getTagCss as getComponentCss$9 } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
-import { getDirectChildHTMLElement } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
+import { VARIANT_TO_COLOR_MAP, getDirectChildHTMLElement } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
 import { PIcon } from '../components/icon.wrapper.mjs';
 
 /**
@@ -23,7 +23,11 @@ class DSRTag extends Component {
             'notification-success': 'notification-success-soft',
             'notification-error': 'notification-error-soft',
         };
-        const style = minifyCss(getComponentCss$9((deprecationMap[this.props.color] || this.props.color), this.props.compact, !!getDirectChildHTMLElement(null, 'a,button'), hasIcon, this.props.theme));
+        // Resolve effective color: variant takes precedence over color
+        const resolvedColor = this.props.variant
+            ? VARIANT_TO_COLOR_MAP[this.props.variant]
+            : (deprecationMap[this.props.color] || this.props.color);
+        const style = minifyCss(getComponentCss$9(resolvedColor, this.props.compact, !!getDirectChildHTMLElement(null, 'a,button'), hasIcon, this.props.theme));
         return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs("span", { children: [hasIcon && (jsx(PIcon, { className: "icon", name: this.props.icon, source: this.props.iconSource, color: "primary", size: "x-small", theme: this.props.theme, "aria-hidden": "true" })), jsx("slot", {})] })] }), this.props.children] }));
     }
 }

package/ssr/esm/lib/components/tag.wrapper.d.ts

@@ -1,8 +1,8 @@
 import type { BaseProps } from '../../BaseProps';
-import type { TagColor, TagIcon, Theme } from '../types';
+import type { TagColor, TagIcon, Theme, TagVariant } from '../types';
 export type PTagProps = BaseProps & {
     /**
-     * Background color variations depending on theme property.
+     * @deprecated since v3.33.0, will be removed with next major release. Use `variant` prop instead. Background color variations depending on theme property.
      */
     color?: TagColor;
     /**
@@ -21,10 +21,14 @@ export type PTagProps = BaseProps & {
      * Adapts the tag color depending on the theme.
      */
     theme?: Theme;
+    /**
+     * Background color variations.
+     */
+    variant?: TagVariant;
 };
 export declare const PTag: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
-     * Background color variations depending on theme property.
+     * @deprecated since v3.33.0, will be removed with next major release. Use `variant` prop instead. Background color variations depending on theme property.
      */
     color?: TagColor;
     /**
@@ -43,6 +47,10 @@ export declare const PTag: import("react").ForwardRefExoticComponent<Omit<import
      * Adapts the tag color depending on the theme.
      */
     theme?: Theme;
+    /**
+     * Background color variations.
+     */
+    variant?: TagVariant;
 } & {
     children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLElement>>;

package/ssr/esm/lib/types.d.ts

@@ -1644,6 +1644,15 @@ declare const TAG_DISMISSIBLE_ARIA_ATTRIBUTES: readonly [
 ];
 export type TagDismissibleAriaAttribute = (typeof TAG_DISMISSIBLE_ARIA_ATTRIBUTES)[number];
 export type TagIcon = IconName;
+declare const TAG_VARIANTS: readonly [
+    "primary",
+    "secondary",
+    "info",
+    "warning",
+    "success",
+    "error"
+];
+export type TagVariant = (typeof TAG_VARIANTS)[number];
 declare const TAG_COLORS: readonly [
     "background-base",
     "background-surface",
@@ -1660,6 +1669,7 @@ declare const TAG_COLORS: readonly [
     "notification-success",
     "notification-error"
 ];
+/** @deprecated */
 export type TagColor = (typeof TAG_COLORS)[number];
 declare const TEXT_TAGS: readonly [
     "p",