@porsche-design-system/components-vue 3.32.1 → 3.33.0

package/CHANGELOG.md

@@ -14,6 +14,21 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0),
 
 ## [Unreleased]
 
+## [3.33.0] - 2026-03-09
+
+## [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))
+- `Checkbox`: add warning for Firefox form restore bug
+
+### 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

package/cjs/lib/components/TagWrapper.vue.cjs

@@ -1 +1 @@
-"use strict";const e=require("vue"),t=require("../../utils.cjs"),u=e.defineComponent({__name:"TagWrapper",props:{color:{default:"background-surface"},compact:{type:Boolean,default:!1},icon:{},iconSource:{},theme:{}},setup(p){const a=t.usePrefix("p-tag"),o=p,n=e.ref(),c=e.inject(t.themeInjectionKey),s=()=>t.syncProperties(n,{...o,theme:o.theme||c.value});return e.onMounted(s),e.onUpdated(s),e.watch(c,r=>{t.syncProperties(n,{theme:o.theme||r})}),(r,f)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(a)),{ref_key:"pdsComponentRef",ref:n},{default:e.withCtx(()=>[e.renderSlot(r.$slots,"default")]),_:3},512))}});module.exports=u;
+"use strict";const e=require("vue"),t=require("../../utils.cjs"),u=e.defineComponent({__name:"TagWrapper",props:{color:{default:"background-surface"},compact:{type:Boolean,default:!1},icon:{},iconSource:{},theme:{},variant:{}},setup(a){const p=t.usePrefix("p-tag"),o=a,n=e.ref(),c=e.inject(t.themeInjectionKey),s=()=>t.syncProperties(n,{...o,theme:o.theme||c.value});return e.onMounted(s),e.onUpdated(s),e.watch(c,r=>{t.syncProperties(n,{theme:o.theme||r})}),(r,f)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(p)),{ref_key:"pdsComponentRef",ref:n},{default:e.withCtx(()=>[e.renderSlot(r.$slots,"default")]),_:3},512))}});module.exports=u;

package/esm/lib/components/TagWrapper.vue.d.ts

@@ -1,7 +1,7 @@
-import type { TagColor, TagIcon, Theme } from '../types';
+import type { TagColor, TagIcon, Theme, TagVariant } from '../types';
 type PTagProps = {
     /**
-     * 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;
     /**
@@ -20,6 +20,10 @@ type PTagProps = {
      * Adapts the tag color depending on the theme.
      */
     theme?: Theme;
+    /**
+     * Background color variations.
+     */
+    variant?: TagVariant;
 };
 declare var __VLS_8: {};
 type __VLS_Slots = {} & {

package/esm/lib/components/TagWrapper.vue.mjs

@@ -1,19 +1,20 @@
 import { defineComponent as s, ref as m, inject as f, onMounted as u, onUpdated as l, watch as d, createBlock as i, openBlock as h, resolveDynamicComponent as _, unref as y, withCtx as C, renderSlot as g } from "vue";
-import { usePrefix as k, themeInjectionKey as w, syncProperties as c } from "../../utils.mjs";
-const R = /* @__PURE__ */ s({
+import { usePrefix as k, themeInjectionKey as v, syncProperties as c } from "../../utils.mjs";
+const P = /* @__PURE__ */ s({
   __name: "TagWrapper",
   props: {
     color: { default: "background-surface" },
     compact: { type: Boolean, default: !1 },
     icon: {},
     iconSource: {},
-    theme: {}
+    theme: {},
+    variant: {}
   },
-  setup(p) {
-    const a = k("p-tag"), e = p, o = m(), n = f(w), r = () => c(o, { ...e, theme: e.theme || n.value });
+  setup(a) {
+    const p = k("p-tag"), e = a, o = m(), n = f(v), r = () => c(o, { ...e, theme: e.theme || n.value });
     return u(r), l(r), d(n, (t) => {
       c(o, { theme: e.theme || t });
-    }), (t, x) => (h(), i(_(y(a)), {
+    }), (t, w) => (h(), i(_(y(p)), {
       ref_key: "pdsComponentRef",
       ref: o
     }, {
@@ -25,5 +26,5 @@ const R = /* @__PURE__ */ s({
   }
 });
 export {
-  R as default
+  P as default
 };

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-vue",
-  "version": "3.32.1",
+  "version": "3.33.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"
+    "@porsche-design-system/components-js": "3.33.0"
   },
   "peerDependencies": {
     "ag-grid-enterprise": ">= 35.0.0 <36.0.0",