From 4c030afa7d4c90b2e3c7d2205f4550401418c603 Mon Sep 17 00:00:00 2001
From: Lungan Catalin <catalin.lungan@endava.com>
Date: Fri, 22 Dec 2023 13:18:48 +0200
Subject: [PATCH 1/8] feat(Tag): introduce logic for assigning custom tag
 colors

---
 packages/beeq/src/components.d.ts                        | 8 ++++++++
 .../src/components/tag/_storybook/bq-tag.stories.tsx     | 3 +++
 packages/beeq/src/components/tag/bq-tag.tsx              | 9 ++++++++-
 3 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/packages/beeq/src/components.d.ts b/packages/beeq/src/components.d.ts
index f4371b08e..aff274880 100644
--- a/packages/beeq/src/components.d.ts
+++ b/packages/beeq/src/components.d.ts
@@ -1020,6 +1020,10 @@ export namespace Components {
           * The color style of the Tag
          */
         "color": TTagColor;
+        /**
+          * The custom style color of the Tag
+         */
+        "customColor"?: string;
         /**
           * If true, the Tag will be disabled (only if clickable = `true`, no interaction allowed)
          */
@@ -3036,6 +3040,10 @@ declare namespace LocalJSX {
           * The color style of the Tag
          */
         "color"?: TTagColor;
+        /**
+          * The custom style color of the Tag
+         */
+        "customColor"?: string;
         /**
           * If true, the Tag will be disabled (only if clickable = `true`, no interaction allowed)
          */
diff --git a/packages/beeq/src/components/tag/_storybook/bq-tag.stories.tsx b/packages/beeq/src/components/tag/_storybook/bq-tag.stories.tsx
index ef57fd29e..df92acafc 100644
--- a/packages/beeq/src/components/tag/_storybook/bq-tag.stories.tsx
+++ b/packages/beeq/src/components/tag/_storybook/bq-tag.stories.tsx
@@ -20,6 +20,7 @@ const meta: Meta = {
     disabled: { control: 'boolean' },
     hidden: { control: 'boolean' },
     removable: { control: 'boolean' },
+    'custom-color': { control: 'text' },
     selected: { control: 'boolean' },
     size: { control: 'select', options: [...TAG_SIZE] },
     variant: { control: 'select', options: [...TAG_VARIANT] },
@@ -37,6 +38,7 @@ const meta: Meta = {
     border: undefined,
     clickable: false,
     color: undefined,
+    'custom-color': undefined,
     disabled: false,
     hidden: false,
     removable: false,
@@ -54,6 +56,7 @@ const Template = (args: Args) => html`
     border=${ifDefined(args.border)}
     ?clickable=${args.clickable}
     color=${ifDefined(args.color)}
+    custom-color=${ifDefined(args['custom-color'])}
     ?disabled=${args.disabled}
     ?hidden=${args.hidden}
     ?removable=${args.removable}
diff --git a/packages/beeq/src/components/tag/bq-tag.tsx b/packages/beeq/src/components/tag/bq-tag.tsx
index 8c139938d..cbc45ff4d 100644
--- a/packages/beeq/src/components/tag/bq-tag.tsx
+++ b/packages/beeq/src/components/tag/bq-tag.tsx
@@ -45,6 +45,9 @@ export class BqTag {
   /** The color style of the Tag */
   @Prop({ reflect: true }) color: TTagColor;
 
+  /** The custom style color of the Tag */
+  @Prop({ reflect: true }) customColor?: string;
+
   /** If true, the Tag will be disabled (only if clickable = `true`, no interaction allowed) */
   @Prop({ reflect: true }) disabled?: boolean = false;
 
@@ -193,13 +196,17 @@ export class BqTag {
     const style = {
       '--bq-tag--icon-prefix-size': `${iconSize(this.size)}px`,
       ...(this.border && { '--bq-tag--border-radius': `var(--bq-radius--${this.border})` }),
+      ...(this.customColor && { '--bq-tag--background-color': this.customColor }),
+      ...(this.customColor && { '--bq-text--primary': `var(--bq-text--primary-alt)` }),
+      ...(this.customColor && { '--bq-icon--color': `var(--bq-text--primary-alt)` }),
     };
 
     return (
       <Host style={style} aria-hidden={this.isHidden ? 'true' : 'false'} hidden={this.isHidden ? 'true' : 'false'}>
         <button
           class={{
-            [`bq-tag bq-tag__${this.size} bq-tag__${this.color || 'default'} bq-tag__${this.variant}`]: true,
+            [`bq-tag bq-tag__${this.size}`]: true,
+            [`bq-tag__${this.color || 'default'} bq-tag__${this.variant}`]: !this.customColor,
             'is-clickable': this.isClickable,
             'is-removable': this.removable,
             // Active/Selected state when clickable

From 826a3c2572a7bab23be1971a997225853936ef59 Mon Sep 17 00:00:00 2001
From: Lungan Catalin <catalin.lungan@endava.com>
Date: Fri, 22 Dec 2023 16:20:42 +0200
Subject: [PATCH 2/8] feat(Tag): improve logic for custom tag color

---
 packages/beeq/src/components/tag/bq-tag.tsx | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/packages/beeq/src/components/tag/bq-tag.tsx b/packages/beeq/src/components/tag/bq-tag.tsx
index cbc45ff4d..a497dac15 100644
--- a/packages/beeq/src/components/tag/bq-tag.tsx
+++ b/packages/beeq/src/components/tag/bq-tag.tsx
@@ -177,7 +177,7 @@ export class BqTag {
   };
 
   private get isClickable(): boolean {
-    return this.clickable && !this.color && !this.removable;
+    return this.clickable && !this.color && !this.customColor && !this.removable;
   }
 
   private get isRemovable(): boolean {
@@ -188,6 +188,10 @@ export class BqTag {
     return this.isRemovable && this.hidden;
   }
 
+  private get hasCustomColor(): boolean {
+    return !!this.customColor;
+  }
+
   // render() function
   // Always the last one in the class.
   // ===================================
@@ -198,7 +202,6 @@ export class BqTag {
       ...(this.border && { '--bq-tag--border-radius': `var(--bq-radius--${this.border})` }),
       ...(this.customColor && { '--bq-tag--background-color': this.customColor }),
       ...(this.customColor && { '--bq-text--primary': `var(--bq-text--primary-alt)` }),
-      ...(this.customColor && { '--bq-icon--color': `var(--bq-text--primary-alt)` }),
     };
 
     return (
@@ -243,7 +246,7 @@ export class BqTag {
               <bq-icon
                 size={iconSize(this.size)}
                 name="x-circle"
-                color={this.color ? textColor(this.color)[this.variant] : 'text--primary'}
+                color={this.color && !this.hasCustomColor ? textColor(this.color)[this.variant] : 'text--primary'}
               />
             </bq-button>
           )}

From 877d00d044df9248e96c8171d454642d994126d9 Mon Sep 17 00:00:00 2001
From: Lungan Catalin <catalin.lungan@endava.com>
Date: Tue, 9 Jan 2024 13:21:44 +0200
Subject: [PATCH 3/8] feat(Tag): refactor logic for custom color and add story

---
 packages/beeq/src/components.d.ts               |  8 --------
 .../tag/_storybook/bq-tag.stories.tsx           | 17 +++++++++++++++++
 packages/beeq/src/components/tag/bq-tag.tsx     | 17 +++++++----------
 .../beeq/src/components/tag/bq-tag.types.ts     |  2 +-
 packages/beeq/src/shared/utils/cssVariables.ts  |  6 +++++-
 5 files changed, 30 insertions(+), 20 deletions(-)

diff --git a/packages/beeq/src/components.d.ts b/packages/beeq/src/components.d.ts
index aff274880..f4371b08e 100644
--- a/packages/beeq/src/components.d.ts
+++ b/packages/beeq/src/components.d.ts
@@ -1020,10 +1020,6 @@ export namespace Components {
           * The color style of the Tag
          */
         "color": TTagColor;
-        /**
-          * The custom style color of the Tag
-         */
-        "customColor"?: string;
         /**
           * If true, the Tag will be disabled (only if clickable = `true`, no interaction allowed)
          */
@@ -3040,10 +3036,6 @@ declare namespace LocalJSX {
           * The color style of the Tag
          */
         "color"?: TTagColor;
-        /**
-          * The custom style color of the Tag
-         */
-        "customColor"?: string;
         /**
           * If true, the Tag will be disabled (only if clickable = `true`, no interaction allowed)
          */
diff --git a/packages/beeq/src/components/tag/_storybook/bq-tag.stories.tsx b/packages/beeq/src/components/tag/_storybook/bq-tag.stories.tsx
index df92acafc..7b4d2c901 100644
--- a/packages/beeq/src/components/tag/_storybook/bq-tag.stories.tsx
+++ b/packages/beeq/src/components/tag/_storybook/bq-tag.stories.tsx
@@ -147,6 +147,23 @@ export const ColorOutline: Story = {
   },
 };
 
+export const CustomColor: Story = {
+  name: 'Color - custom',
+  render: (args: Args) => html`
+    <div class="flex gap-s">
+      <!-- Hex custom color -->
+      ${Template({ ...args, color: '#FF5733', text: 'HEX', icon: 'yin-yang' })}
+      <!-- Rgba custom color -->
+      ${Template({ ...args, color: 'rgba(255, 87, 51, 0.7)', text: 'RGBA', icon: 'rss' })}
+      <!-- Theme custom color palette -->
+      ${Template({ ...args, color: 'data--sky', text: 'Theme Palette', icon: 'palette' })}
+    </div>
+  `,
+  args: {
+    variant: 'outline',
+  },
+};
+
 export const RemovableFilled: Story = {
   name: 'Removable - filled',
   render: (args: Args) => html`
diff --git a/packages/beeq/src/components/tag/bq-tag.tsx b/packages/beeq/src/components/tag/bq-tag.tsx
index a497dac15..60db8309b 100644
--- a/packages/beeq/src/components/tag/bq-tag.tsx
+++ b/packages/beeq/src/components/tag/bq-tag.tsx
@@ -1,8 +1,8 @@
 import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State, Watch } from '@stencil/core';
 
-import { TAG_SIZE, TAG_VARIANT, TTagBorderRadius, TTagColor, TTagSize, TTagVariant } from './bq-tag.types';
+import { TAG_COLOR, TAG_SIZE, TAG_VARIANT, TTagBorderRadius, TTagColor, TTagSize, TTagVariant } from './bq-tag.types';
 import { iconSize, textColor } from './helper';
-import { hasSlotContent, validatePropValue } from '../../shared/utils';
+import { getColorCSSVariable, hasSlotContent, validatePropValue } from '../../shared/utils';
 
 /**
  * @part wrapper - The wrapper container `<div>` of the element inside the shadow DOM.
@@ -45,9 +45,6 @@ export class BqTag {
   /** The color style of the Tag */
   @Prop({ reflect: true }) color: TTagColor;
 
-  /** The custom style color of the Tag */
-  @Prop({ reflect: true }) customColor?: string;
-
   /** If true, the Tag will be disabled (only if clickable = `true`, no interaction allowed) */
   @Prop({ reflect: true }) disabled?: boolean = false;
 
@@ -177,7 +174,7 @@ export class BqTag {
   };
 
   private get isClickable(): boolean {
-    return this.clickable && !this.color && !this.customColor && !this.removable;
+    return this.clickable && !this.color && !this.hasCustomColor && !this.removable;
   }
 
   private get isRemovable(): boolean {
@@ -189,7 +186,7 @@ export class BqTag {
   }
 
   private get hasCustomColor(): boolean {
-    return !!this.customColor;
+    return this.color !== undefined ? !TAG_COLOR.includes(this.color) : false;
   }
 
   // render() function
@@ -200,8 +197,8 @@ export class BqTag {
     const style = {
       '--bq-tag--icon-prefix-size': `${iconSize(this.size)}px`,
       ...(this.border && { '--bq-tag--border-radius': `var(--bq-radius--${this.border})` }),
-      ...(this.customColor && { '--bq-tag--background-color': this.customColor }),
-      ...(this.customColor && { '--bq-text--primary': `var(--bq-text--primary-alt)` }),
+      ...(this.color && { '--bq-tag--background-color': getColorCSSVariable(this.color) ?? this.color }),
+      ...(this.hasCustomColor && { '--bq-text--primary': `var(--bq-text--primary-alt)` }),
     };
 
     return (
@@ -209,7 +206,7 @@ export class BqTag {
         <button
           class={{
             [`bq-tag bq-tag__${this.size}`]: true,
-            [`bq-tag__${this.color || 'default'} bq-tag__${this.variant}`]: !this.customColor,
+            [`bq-tag__${this.color || 'default'} bq-tag__${this.variant}`]: !this.hasCustomColor,
             'is-clickable': this.isClickable,
             'is-removable': this.removable,
             // Active/Selected state when clickable
diff --git a/packages/beeq/src/components/tag/bq-tag.types.ts b/packages/beeq/src/components/tag/bq-tag.types.ts
index 052be7c51..17710be32 100644
--- a/packages/beeq/src/components/tag/bq-tag.types.ts
+++ b/packages/beeq/src/components/tag/bq-tag.types.ts
@@ -2,7 +2,7 @@ export const TAG_SIZE = ['xsmall', 'small', 'medium'] as const;
 export type TTagSize = (typeof TAG_SIZE)[number];
 
 export const TAG_COLOR = ['error', 'gray', 'info', 'success', 'warning'] as const;
-export type TTagColor = (typeof TAG_COLOR)[number];
+export type TTagColor = (typeof TAG_COLOR)[number] | (string & object);
 
 export const TAG_VARIANT = ['outline', 'filled'] as const;
 export type TTagVariant = (typeof TAG_VARIANT)[number];
diff --git a/packages/beeq/src/shared/utils/cssVariables.ts b/packages/beeq/src/shared/utils/cssVariables.ts
index 3b4a1665d..8db531ed3 100644
--- a/packages/beeq/src/shared/utils/cssVariables.ts
+++ b/packages/beeq/src/shared/utils/cssVariables.ts
@@ -7,7 +7,11 @@ const CSSVALUEPREFIX = '--bq-';
  * @return {string} The correspongin CSS custom property variable
  */
 export function getColorCSSVariable(colorName: string): string {
-  return `var(${CSSVALUEPREFIX}${colorName})`;
+  const token = `${CSSVALUEPREFIX}${colorName}`;
+  const value = getComputedStyle(document.documentElement).getPropertyValue(token);
+  if (!value) return undefined;
+
+  return `var(${token})`;
 }
 
 /**

From 49b5cd8aaa337b1e3b07ef6132957988be322165 Mon Sep 17 00:00:00 2001
From: Lungan Catalin <catalin.lungan@endava.com>
Date: Tue, 9 Jan 2024 14:03:47 +0200
Subject: [PATCH 4/8] feat(Tag): add  as dependency

---
 package-lock.json | 411 ++++++++++++++++++++++++++++++++--------------
 package.json      |   1 +
 2 files changed, 285 insertions(+), 127 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 6746bfc2c..58b30cc1a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -101,6 +101,7 @@
         "husky": "8.0.3",
         "jest": "29.7.0",
         "jest-environment-jsdom": "29.7.0",
+        "jsdom": "23.2.0",
         "jsonc-eslint-parser": "2.4.0",
         "lint-staged": "15.2.0",
         "lit-html": "3.1.0",
@@ -1224,6 +1225,17 @@
         "rxjs": "^6.5.3 || ^7.4.0"
       }
     },
+    "node_modules/@asamuzakjp/dom-selector": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@asamuzakjp/dom-selector/-/dom-selector-2.0.1.tgz",
+      "integrity": "sha512-QJAJffmCiymkv6YyQ7voyQb5caCth6jzZsQncYCpHXrJ7RqdYG5y43+is8mnFcYubdOkr7cn1+na9BdFMxqw7w==",
+      "dev": true,
+      "dependencies": {
+        "bidi-js": "^1.0.3",
+        "css-tree": "^2.3.1",
+        "is-potential-custom-element-name": "^1.0.1"
+      }
+    },
     "node_modules/@assemblyscript/loader": {
       "version": "0.10.1",
       "resolved": "https://registry.npmjs.org/@assemblyscript/loader/-/loader-0.10.1.tgz",
@@ -6553,19 +6565,6 @@
         "node": "^16.14.0 || >=18.0.0"
       }
     },
-    "node_modules/@npmcli/agent/node_modules/http-proxy-agent": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-7.0.0.tgz",
-      "integrity": "sha512-+ZT+iBxVUQ1asugqnD6oWoRiS25AkjNfG085dKJGtGxkdwLQrMKU5wJr2bOOFAXzKcTuqq+7fZlTMgG3SRfIYQ==",
-      "dev": true,
-      "dependencies": {
-        "agent-base": "^7.1.0",
-        "debug": "^4.3.4"
-      },
-      "engines": {
-        "node": ">= 14"
-      }
-    },
     "node_modules/@npmcli/agent/node_modules/lru-cache": {
       "version": "10.1.0",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.1.0.tgz",
@@ -19658,6 +19657,15 @@
         "node": ">=12.0.0"
       }
     },
+    "node_modules/bidi-js": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/bidi-js/-/bidi-js-1.0.3.tgz",
+      "integrity": "sha512-RKshQI1R3YQ+n9YJz2QQ147P66ELpa1FQEg20Dk8oW9t2KgLbpDLLp9aGZ7y8WHSshDknG0bknqGw5/tyCs5tw==",
+      "dev": true,
+      "dependencies": {
+        "require-from-string": "^2.0.2"
+      }
+    },
     "node_modules/big-integer": {
       "version": "1.6.52",
       "resolved": "https://registry.npmjs.org/big-integer/-/big-integer-1.6.52.tgz",
@@ -22494,17 +22502,16 @@
       }
     },
     "node_modules/data-urls": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-3.0.2.tgz",
-      "integrity": "sha512-Jy/tj3ldjZJo63sVAvg6LHt2mHvl4V6AgRAmNDtLdm7faqtsx+aJG42rsyCo9JCoRVKwPFzKlIPx3DIibwSIaQ==",
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-5.0.0.tgz",
+      "integrity": "sha512-ZYP5VBHshaDAiVZxjbRVcFJpc+4xGgT0bK3vzy1HLN8jTO975HEbuYzZJcHoQEY5K1a0z8YayJkyVETa08eNTg==",
       "dev": true,
       "dependencies": {
-        "abab": "^2.0.6",
-        "whatwg-mimetype": "^3.0.0",
-        "whatwg-url": "^11.0.0"
+        "whatwg-mimetype": "^4.0.0",
+        "whatwg-url": "^14.0.0"
       },
       "engines": {
-        "node": ">=12"
+        "node": ">=18"
       }
     },
     "node_modules/debug": {
@@ -27243,29 +27250,16 @@
       }
     },
     "node_modules/http-proxy-agent": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-5.0.0.tgz",
-      "integrity": "sha512-n2hY8YdoRE1i7r6M0w9DIw5GgZN0G25P8zLCRQ8rjXtTU3vsNFBI/vWK/UIeE6g5MUUz6avwAPXmL6Fy9D/90w==",
-      "dev": true,
-      "dependencies": {
-        "@tootallnate/once": "2",
-        "agent-base": "6",
-        "debug": "4"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/http-proxy-agent/node_modules/agent-base": {
-      "version": "6.0.2",
-      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
-      "integrity": "sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==",
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-7.0.0.tgz",
+      "integrity": "sha512-+ZT+iBxVUQ1asugqnD6oWoRiS25AkjNfG085dKJGtGxkdwLQrMKU5wJr2bOOFAXzKcTuqq+7fZlTMgG3SRfIYQ==",
       "dev": true,
       "dependencies": {
-        "debug": "4"
+        "agent-base": "^7.1.0",
+        "debug": "^4.3.4"
       },
       "engines": {
-        "node": ">= 6.0.0"
+        "node": ">= 14"
       }
     },
     "node_modules/http-proxy-middleware": {
@@ -29425,6 +29419,171 @@
         }
       }
     },
+    "node_modules/jest-environment-jsdom/node_modules/agent-base": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
+      "integrity": "sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==",
+      "dev": true,
+      "dependencies": {
+        "debug": "4"
+      },
+      "engines": {
+        "node": ">= 6.0.0"
+      }
+    },
+    "node_modules/jest-environment-jsdom/node_modules/data-urls": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-3.0.2.tgz",
+      "integrity": "sha512-Jy/tj3ldjZJo63sVAvg6LHt2mHvl4V6AgRAmNDtLdm7faqtsx+aJG42rsyCo9JCoRVKwPFzKlIPx3DIibwSIaQ==",
+      "dev": true,
+      "dependencies": {
+        "abab": "^2.0.6",
+        "whatwg-mimetype": "^3.0.0",
+        "whatwg-url": "^11.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/jest-environment-jsdom/node_modules/http-proxy-agent": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-5.0.0.tgz",
+      "integrity": "sha512-n2hY8YdoRE1i7r6M0w9DIw5GgZN0G25P8zLCRQ8rjXtTU3vsNFBI/vWK/UIeE6g5MUUz6avwAPXmL6Fy9D/90w==",
+      "dev": true,
+      "dependencies": {
+        "@tootallnate/once": "2",
+        "agent-base": "6",
+        "debug": "4"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/jest-environment-jsdom/node_modules/https-proxy-agent": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz",
+      "integrity": "sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==",
+      "dev": true,
+      "dependencies": {
+        "agent-base": "6",
+        "debug": "4"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/jest-environment-jsdom/node_modules/jsdom": {
+      "version": "20.0.3",
+      "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-20.0.3.tgz",
+      "integrity": "sha512-SYhBvTh89tTfCD/CRdSOm13mOBa42iTaTyfyEWBdKcGdPxPtLFBXuHR8XHb33YNYaP+lLbmSvBTsnoesCNJEsQ==",
+      "dev": true,
+      "dependencies": {
+        "abab": "^2.0.6",
+        "acorn": "^8.8.1",
+        "acorn-globals": "^7.0.0",
+        "cssom": "^0.5.0",
+        "cssstyle": "^2.3.0",
+        "data-urls": "^3.0.2",
+        "decimal.js": "^10.4.2",
+        "domexception": "^4.0.0",
+        "escodegen": "^2.0.0",
+        "form-data": "^4.0.0",
+        "html-encoding-sniffer": "^3.0.0",
+        "http-proxy-agent": "^5.0.0",
+        "https-proxy-agent": "^5.0.1",
+        "is-potential-custom-element-name": "^1.0.1",
+        "nwsapi": "^2.2.2",
+        "parse5": "^7.1.1",
+        "saxes": "^6.0.0",
+        "symbol-tree": "^3.2.4",
+        "tough-cookie": "^4.1.2",
+        "w3c-xmlserializer": "^4.0.0",
+        "webidl-conversions": "^7.0.0",
+        "whatwg-encoding": "^2.0.0",
+        "whatwg-mimetype": "^3.0.0",
+        "whatwg-url": "^11.0.0",
+        "ws": "^8.11.0",
+        "xml-name-validator": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "canvas": "^2.5.0"
+      },
+      "peerDependenciesMeta": {
+        "canvas": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/jest-environment-jsdom/node_modules/parse5": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.1.2.tgz",
+      "integrity": "sha512-Czj1WaSVpaoj0wbhMzLmWD69anp2WH7FXMB9n1Sy8/ZFF9jolSQVMu1Ij5WIyGmcBmhk7EOndpO4mIpihVqAXw==",
+      "dev": true,
+      "dependencies": {
+        "entities": "^4.4.0"
+      },
+      "funding": {
+        "url": "https://github.com/inikulin/parse5?sponsor=1"
+      }
+    },
+    "node_modules/jest-environment-jsdom/node_modules/tr46": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/tr46/-/tr46-3.0.0.tgz",
+      "integrity": "sha512-l7FvfAHlcmulp8kr+flpQZmVwtu7nfRV7NZujtN0OqES8EL4O4e0qqzL0DC5gAvx/ZC/9lk6rhcUwYvkBnBnYA==",
+      "dev": true,
+      "dependencies": {
+        "punycode": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/jest-environment-jsdom/node_modules/w3c-xmlserializer": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-4.0.0.tgz",
+      "integrity": "sha512-d+BFHzbiCx6zGfz0HyQ6Rg69w9k19nviJspaj4yNscGjrHu94sVP+aRm75yEbCh+r2/yR+7q6hux9LVtbuTGBw==",
+      "dev": true,
+      "dependencies": {
+        "xml-name-validator": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/jest-environment-jsdom/node_modules/whatwg-mimetype": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-3.0.0.tgz",
+      "integrity": "sha512-nt+N2dzIutVRxARx1nghPKGv1xHikU7HKdfafKkLNLindmPU/ch3U31NOCGGA/dmPcmb1VlofO0vnKAcsm0o/Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/jest-environment-jsdom/node_modules/whatwg-url": {
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-11.0.0.tgz",
+      "integrity": "sha512-RKT8HExMpoYx4igMiVMY83lN6UeITKJlBQ+vR/8ZJ8OCdSiN3RwCq+9gH0+Xzj0+5IrM6i4j/6LuvzbZIQgEcQ==",
+      "dev": true,
+      "dependencies": {
+        "tr46": "^3.0.0",
+        "webidl-conversions": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/jest-environment-jsdom/node_modules/xml-name-validator": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-4.0.0.tgz",
+      "integrity": "sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/jest-environment-node": {
       "version": "29.7.0",
       "resolved": "https://registry.npmjs.org/jest-environment-node/-/jest-environment-node-29.7.0.tgz",
@@ -30581,43 +30740,38 @@
       }
     },
     "node_modules/jsdom": {
-      "version": "20.0.3",
-      "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-20.0.3.tgz",
-      "integrity": "sha512-SYhBvTh89tTfCD/CRdSOm13mOBa42iTaTyfyEWBdKcGdPxPtLFBXuHR8XHb33YNYaP+lLbmSvBTsnoesCNJEsQ==",
+      "version": "23.2.0",
+      "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-23.2.0.tgz",
+      "integrity": "sha512-L88oL7D/8ufIES+Zjz7v0aes+oBMh2Xnh3ygWvL0OaICOomKEPKuPnIfBJekiXr+BHbbMjrWn/xqrDQuxFTeyA==",
       "dev": true,
       "dependencies": {
-        "abab": "^2.0.6",
-        "acorn": "^8.8.1",
-        "acorn-globals": "^7.0.0",
-        "cssom": "^0.5.0",
-        "cssstyle": "^2.3.0",
-        "data-urls": "^3.0.2",
-        "decimal.js": "^10.4.2",
-        "domexception": "^4.0.0",
-        "escodegen": "^2.0.0",
+        "@asamuzakjp/dom-selector": "^2.0.1",
+        "cssstyle": "^4.0.1",
+        "data-urls": "^5.0.0",
+        "decimal.js": "^10.4.3",
         "form-data": "^4.0.0",
-        "html-encoding-sniffer": "^3.0.0",
-        "http-proxy-agent": "^5.0.0",
-        "https-proxy-agent": "^5.0.1",
+        "html-encoding-sniffer": "^4.0.0",
+        "http-proxy-agent": "^7.0.0",
+        "https-proxy-agent": "^7.0.2",
         "is-potential-custom-element-name": "^1.0.1",
-        "nwsapi": "^2.2.2",
-        "parse5": "^7.1.1",
+        "parse5": "^7.1.2",
+        "rrweb-cssom": "^0.6.0",
         "saxes": "^6.0.0",
         "symbol-tree": "^3.2.4",
-        "tough-cookie": "^4.1.2",
-        "w3c-xmlserializer": "^4.0.0",
+        "tough-cookie": "^4.1.3",
+        "w3c-xmlserializer": "^5.0.0",
         "webidl-conversions": "^7.0.0",
-        "whatwg-encoding": "^2.0.0",
-        "whatwg-mimetype": "^3.0.0",
-        "whatwg-url": "^11.0.0",
-        "ws": "^8.11.0",
-        "xml-name-validator": "^4.0.0"
+        "whatwg-encoding": "^3.1.1",
+        "whatwg-mimetype": "^4.0.0",
+        "whatwg-url": "^14.0.0",
+        "ws": "^8.16.0",
+        "xml-name-validator": "^5.0.0"
       },
       "engines": {
-        "node": ">=14"
+        "node": ">=18"
       },
       "peerDependencies": {
-        "canvas": "^2.5.0"
+        "canvas": "^2.11.2"
       },
       "peerDependenciesMeta": {
         "canvas": {
@@ -30625,29 +30779,40 @@
         }
       }
     },
-    "node_modules/jsdom/node_modules/agent-base": {
-      "version": "6.0.2",
-      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
-      "integrity": "sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==",
+    "node_modules/jsdom/node_modules/cssstyle": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-4.0.1.tgz",
+      "integrity": "sha512-8ZYiJ3A/3OkDd093CBT/0UKDWry7ak4BdPTFP2+QEP7cmhouyq/Up709ASSj2cK02BbZiMgk7kYjZNS4QP5qrQ==",
       "dev": true,
       "dependencies": {
-        "debug": "4"
+        "rrweb-cssom": "^0.6.0"
       },
       "engines": {
-        "node": ">= 6.0.0"
+        "node": ">=18"
       }
     },
-    "node_modules/jsdom/node_modules/https-proxy-agent": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz",
-      "integrity": "sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==",
+    "node_modules/jsdom/node_modules/html-encoding-sniffer": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-4.0.0.tgz",
+      "integrity": "sha512-Y22oTqIU4uuPgEemfz7NDJz6OeKf12Lsu+QC+s3BVpda64lTiMYCyGwg5ki4vFxkMwQdeZDl2adZoqUgdFuTgQ==",
       "dev": true,
       "dependencies": {
-        "agent-base": "6",
-        "debug": "4"
+        "whatwg-encoding": "^3.1.1"
       },
       "engines": {
-        "node": ">= 6"
+        "node": ">=18"
+      }
+    },
+    "node_modules/jsdom/node_modules/iconv-lite": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
+      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+      "dev": true,
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
       }
     },
     "node_modules/jsdom/node_modules/parse5": {
@@ -30662,6 +30827,18 @@
         "url": "https://github.com/inikulin/parse5?sponsor=1"
       }
     },
+    "node_modules/jsdom/node_modules/whatwg-encoding": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-3.1.1.tgz",
+      "integrity": "sha512-6qN4hJdMwfYBtE3YBTTHhoeuUrDBPZmbQaxWAqSALV/MeEnR5z1xd8UKud2RAkFoPkmB+hli1TZSnyi84xz1vQ==",
+      "dev": true,
+      "dependencies": {
+        "iconv-lite": "0.6.3"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/jsesc": {
       "version": "2.5.2",
       "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz",
@@ -34545,19 +34722,6 @@
         "node": ">= 14"
       }
     },
-    "node_modules/pac-proxy-agent/node_modules/http-proxy-agent": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-7.0.0.tgz",
-      "integrity": "sha512-+ZT+iBxVUQ1asugqnD6oWoRiS25AkjNfG085dKJGtGxkdwLQrMKU5wJr2bOOFAXzKcTuqq+7fZlTMgG3SRfIYQ==",
-      "dev": true,
-      "dependencies": {
-        "agent-base": "^7.1.0",
-        "debug": "^4.3.4"
-      },
-      "engines": {
-        "node": ">= 14"
-      }
-    },
     "node_modules/pac-resolver": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/pac-resolver/-/pac-resolver-7.0.0.tgz",
@@ -37046,19 +37210,6 @@
         "node": ">= 14"
       }
     },
-    "node_modules/proxy-agent/node_modules/http-proxy-agent": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-7.0.0.tgz",
-      "integrity": "sha512-+ZT+iBxVUQ1asugqnD6oWoRiS25AkjNfG085dKJGtGxkdwLQrMKU5wJr2bOOFAXzKcTuqq+7fZlTMgG3SRfIYQ==",
-      "dev": true,
-      "dependencies": {
-        "agent-base": "^7.1.0",
-        "debug": "^4.3.4"
-      },
-      "engines": {
-        "node": ">= 14"
-      }
-    },
     "node_modules/proxy-agent/node_modules/lru-cache": {
       "version": "7.18.3",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-7.18.3.tgz",
@@ -39234,6 +39385,12 @@
       "integrity": "sha512-SqmZANLWS0mnatqbSfRP5g8OXZC12Fgg1IwNtLsyHDzJizORW4khDfjPqJZsemPWBB2uqykUah5YpQ6epsqC/w==",
       "dev": true
     },
+    "node_modules/rrweb-cssom": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/rrweb-cssom/-/rrweb-cssom-0.6.0.tgz",
+      "integrity": "sha512-APM0Gt1KoXBz0iIkkdB/kfvGOwC4UuJFeG/c+yV7wSc7q96cG/kJ0HiYCnzivD9SB53cLV1MlHFNfOuPaadYSw==",
+      "dev": true
+    },
     "node_modules/run-async": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/run-async/-/run-async-3.0.0.tgz",
@@ -42970,15 +43127,15 @@
       }
     },
     "node_modules/tr46": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/tr46/-/tr46-3.0.0.tgz",
-      "integrity": "sha512-l7FvfAHlcmulp8kr+flpQZmVwtu7nfRV7NZujtN0OqES8EL4O4e0qqzL0DC5gAvx/ZC/9lk6rhcUwYvkBnBnYA==",
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/tr46/-/tr46-5.0.0.tgz",
+      "integrity": "sha512-tk2G5R2KRwBd+ZN0zaEXpmzdKyOYksXwywulIX95MBODjSzMIuQnQ3m8JxgbhnL1LeVo7lqQKsYa1O3Htl7K5g==",
       "dev": true,
       "dependencies": {
-        "punycode": "^2.1.1"
+        "punycode": "^2.3.1"
       },
       "engines": {
-        "node": ">=12"
+        "node": ">=18"
       }
     },
     "node_modules/tree-kill": {
@@ -44155,15 +44312,15 @@
       }
     },
     "node_modules/w3c-xmlserializer": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-4.0.0.tgz",
-      "integrity": "sha512-d+BFHzbiCx6zGfz0HyQ6Rg69w9k19nviJspaj4yNscGjrHu94sVP+aRm75yEbCh+r2/yR+7q6hux9LVtbuTGBw==",
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-5.0.0.tgz",
+      "integrity": "sha512-o8qghlI8NZHU1lLPrpi2+Uq7abh4GGPpYANlalzWxyWteJOCsr/P+oPBA49TOLu5FTZO4d3F9MnWJfiMo4BkmA==",
       "dev": true,
       "dependencies": {
-        "xml-name-validator": "^4.0.0"
+        "xml-name-validator": "^5.0.0"
       },
       "engines": {
-        "node": ">=14"
+        "node": ">=18"
       }
     },
     "node_modules/walker": {
@@ -44595,25 +44752,25 @@
       }
     },
     "node_modules/whatwg-mimetype": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-3.0.0.tgz",
-      "integrity": "sha512-nt+N2dzIutVRxARx1nghPKGv1xHikU7HKdfafKkLNLindmPU/ch3U31NOCGGA/dmPcmb1VlofO0vnKAcsm0o/Q==",
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-4.0.0.tgz",
+      "integrity": "sha512-QaKxh0eNIi2mE9p2vEdzfagOKHCcj1pJ56EEHGQOVxp8r9/iszLUUV7v89x9O1p/T+NlTM5W7jW6+cz4Fq1YVg==",
       "dev": true,
       "engines": {
-        "node": ">=12"
+        "node": ">=18"
       }
     },
     "node_modules/whatwg-url": {
-      "version": "11.0.0",
-      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-11.0.0.tgz",
-      "integrity": "sha512-RKT8HExMpoYx4igMiVMY83lN6UeITKJlBQ+vR/8ZJ8OCdSiN3RwCq+9gH0+Xzj0+5IrM6i4j/6LuvzbZIQgEcQ==",
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-14.0.0.tgz",
+      "integrity": "sha512-1lfMEm2IEr7RIV+f4lUNPOqfFL+pO+Xw3fJSqmjX9AbXcXcYOkCe1P6+9VBZB6n94af16NfZf+sSk0JCBZC9aw==",
       "dev": true,
       "dependencies": {
-        "tr46": "^3.0.0",
+        "tr46": "^5.0.0",
         "webidl-conversions": "^7.0.0"
       },
       "engines": {
-        "node": ">=12"
+        "node": ">=18"
       }
     },
     "node_modules/which": {
@@ -44819,12 +44976,12 @@
       }
     },
     "node_modules/xml-name-validator": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-4.0.0.tgz",
-      "integrity": "sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw==",
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-5.0.0.tgz",
+      "integrity": "sha512-EvGK8EJ3DhaHfbRlETOWAS5pO9MZITeauHKJyb8wyajUfQUenkIg2MvLDTZ4T/TgIcm3HU0TFBgWWboAZ30UHg==",
       "dev": true,
       "engines": {
-        "node": ">=12"
+        "node": ">=18"
       }
     },
     "node_modules/xmlchars": {
diff --git a/package.json b/package.json
index fd9798b07..42aeaf8b0 100644
--- a/package.json
+++ b/package.json
@@ -121,6 +121,7 @@
     "husky": "8.0.3",
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
+    "jsdom": "23.2.0",
     "jsonc-eslint-parser": "2.4.0",
     "lint-staged": "15.2.0",
     "lit-html": "3.1.0",

From 9d7063be77c87f8d39b2baa8451a1a99aa2f98fc Mon Sep 17 00:00:00 2001
From: Lungan Catalin <catalin.lungan@endava.com>
Date: Tue, 9 Jan 2024 14:12:06 +0200
Subject: [PATCH 5/8] test(cssVariables): update unit test for
 getColorCSSVariable()

---
 .../utils/__tests__/cssVariables.spec.ts      | 25 +++++++++++++++++++
 1 file changed, 25 insertions(+)

diff --git a/packages/beeq/src/shared/utils/__tests__/cssVariables.spec.ts b/packages/beeq/src/shared/utils/__tests__/cssVariables.spec.ts
index e3ce15579..beac9ca9d 100644
--- a/packages/beeq/src/shared/utils/__tests__/cssVariables.spec.ts
+++ b/packages/beeq/src/shared/utils/__tests__/cssVariables.spec.ts
@@ -1,7 +1,32 @@
+import jsdom from 'jsdom';
 import { getColorCSSVariable } from '..';
 
+// Helper function to setup JSDOM and global variables
+function setupDOM(html: string) {
+  const DOM = new jsdom.JSDOM(html);
+  const { document } = DOM.window;
+  global.document = document;
+  global.window = document.defaultView;
+  global.getComputedStyle = window.getComputedStyle.bind(window);
+}
+
 describe('cssVariables - getColorCSSVariable()', () => {
   it('should return the correct CSS Custom Property string', () => {
+    setupDOM(`
+      <html>
+        <head>
+          <style>
+            :root {
+              --bq-ui--primary: #fbfbfc;
+            }
+          </style>
+        </head>
+        <body>
+          <div></div>
+        </body>
+      </html>
+    `);
+
     const token = 'ui--primary';
     const result = `var(--bq-${token})`;
 

From 7db3e746215e2588bc72ca9d1cd1bb0f12e6d839 Mon Sep 17 00:00:00 2001
From: Lungan Catalin <catalin.lungan@endava.com>
Date: Tue, 9 Jan 2024 14:14:43 +0200
Subject: [PATCH 6/8] fix(cssVariables): fix minor typo

---
 packages/beeq/src/shared/utils/cssVariables.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/beeq/src/shared/utils/cssVariables.ts b/packages/beeq/src/shared/utils/cssVariables.ts
index 8db531ed3..603612111 100644
--- a/packages/beeq/src/shared/utils/cssVariables.ts
+++ b/packages/beeq/src/shared/utils/cssVariables.ts
@@ -4,7 +4,7 @@ const CSSVALUEPREFIX = '--bq-';
  * Get CSS custom property variable of a given color string value
  *
  * @param {string} colorName - Valid string value.
- * @return {string} The correspongin CSS custom property variable
+ * @return {string} The corresponding CSS custom property variable
  */
 export function getColorCSSVariable(colorName: string): string {
   const token = `${CSSVALUEPREFIX}${colorName}`;

From 8db82f47ba38ef803b33d14a58b871c005be2b7e Mon Sep 17 00:00:00 2001
From: Lungan Catalin <catalin.lungan@endava.com>
Date: Tue, 9 Jan 2024 14:21:28 +0200
Subject: [PATCH 7/8] feat(Tag): remove unused property

---
 packages/beeq/src/components/tag/_storybook/bq-tag.stories.tsx | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/packages/beeq/src/components/tag/_storybook/bq-tag.stories.tsx b/packages/beeq/src/components/tag/_storybook/bq-tag.stories.tsx
index 7b4d2c901..57a5dec91 100644
--- a/packages/beeq/src/components/tag/_storybook/bq-tag.stories.tsx
+++ b/packages/beeq/src/components/tag/_storybook/bq-tag.stories.tsx
@@ -20,7 +20,6 @@ const meta: Meta = {
     disabled: { control: 'boolean' },
     hidden: { control: 'boolean' },
     removable: { control: 'boolean' },
-    'custom-color': { control: 'text' },
     selected: { control: 'boolean' },
     size: { control: 'select', options: [...TAG_SIZE] },
     variant: { control: 'select', options: [...TAG_VARIANT] },
@@ -38,7 +37,6 @@ const meta: Meta = {
     border: undefined,
     clickable: false,
     color: undefined,
-    'custom-color': undefined,
     disabled: false,
     hidden: false,
     removable: false,
@@ -56,7 +54,6 @@ const Template = (args: Args) => html`
     border=${ifDefined(args.border)}
     ?clickable=${args.clickable}
     color=${ifDefined(args.color)}
-    custom-color=${ifDefined(args['custom-color'])}
     ?disabled=${args.disabled}
     ?hidden=${args.hidden}
     ?removable=${args.removable}

From 35af144da0827df43e3052969612f92e798c2296 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dabiel=20Gonz=C3=A1lez=20Ramos?= <dabiel.ramos@endava.com>
Date: Tue, 9 Jan 2024 15:46:54 +0200
Subject: [PATCH 8/8] chore(deps): sync package-lock.json

---
 package-lock.json                             | 291 ++++++++++--------
 .../beeq/src/components/tag/bq-tag.types.ts   |   2 +-
 2 files changed, 156 insertions(+), 137 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 58b30cc1a..0e3c817b9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1684,9 +1684,9 @@
       }
     },
     "node_modules/@babel/helpers": {
-      "version": "7.23.7",
-      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.23.7.tgz",
-      "integrity": "sha512-6AMnjCoC8wjqBzDHkuqpa7jAKwvMo4dC+lr/TFBz+ucfulO1XMpDnwWPGBNwClOKZ8h6xn5N81W/R5OrcKtCbQ==",
+      "version": "7.23.8",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.23.8.tgz",
+      "integrity": "sha512-KDqYz4PiOWvDFrdHLPhKtCThtIcKVy6avWD2oG4GEvyQ+XDZwHD4YQd+H2vNMnq2rkdxsDkU82T+Vk8U/WXHRQ==",
       "dev": true,
       "dependencies": {
         "@babel/template": "^7.22.15",
@@ -2241,16 +2241,15 @@
       }
     },
     "node_modules/@babel/plugin-transform-classes": {
-      "version": "7.23.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-classes/-/plugin-transform-classes-7.23.5.tgz",
-      "integrity": "sha512-jvOTR4nicqYC9yzOHIhXG5emiFEOpappSJAl73SDSEDcybD+Puuze8Tnpb9p9qEyYup24tq891gkaygIFvWDqg==",
+      "version": "7.23.8",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-classes/-/plugin-transform-classes-7.23.8.tgz",
+      "integrity": "sha512-yAYslGsY1bX6Knmg46RjiCiNSwJKv2IUC8qOdYKqMMr0491SXFhcHqOdRDeCRohOOIzwN/90C6mQ9qAKgrP7dg==",
       "dev": true,
       "dependencies": {
         "@babel/helper-annotate-as-pure": "^7.22.5",
-        "@babel/helper-compilation-targets": "^7.22.15",
+        "@babel/helper-compilation-targets": "^7.23.6",
         "@babel/helper-environment-visitor": "^7.22.20",
         "@babel/helper-function-name": "^7.23.0",
-        "@babel/helper-optimise-call-expression": "^7.22.5",
         "@babel/helper-plugin-utils": "^7.22.5",
         "@babel/helper-replace-supers": "^7.22.20",
         "@babel/helper-split-export-declaration": "^7.22.6",
@@ -16639,9 +16638,9 @@
       }
     },
     "node_modules/@testing-library/dom": {
-      "version": "9.3.3",
-      "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-9.3.3.tgz",
-      "integrity": "sha512-fB0R+fa3AUqbLHWyxXa2kGVtf1Fe1ZZFr0Zp6AIbIAzXb2mKbEXl+PCQNUOaq5lbTab5tfctfXRNsWXxa2f7Aw==",
+      "version": "9.3.4",
+      "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-9.3.4.tgz",
+      "integrity": "sha512-FlS4ZWlp97iiNWig0Muq8p+3rVDjRiYE+YKGbAqXOu9nwJFFOdL00kFpz42M+4huzYi86vAK1sOOfyOG45muIQ==",
       "dev": true,
       "dependencies": {
         "@babel/code-frame": "^7.10.4",
@@ -16743,12 +16742,13 @@
       "dev": true
     },
     "node_modules/@tootallnate/once": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-2.0.0.tgz",
-      "integrity": "sha512-XCuKFP5PS55gnMVu3dty8KPatLqUoy/ZYzDzAGCQ8JNFCkLXzmI7vNHCR+XpbZaMWQK/vQubr7PkYq8g470J/A==",
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-1.1.2.tgz",
+      "integrity": "sha512-RbzJvlNzmRq5c3O09UipeuXno4tA1FE6ikOjxZK0tuxVv3412l64l5t1W5pj4+rJq9vpkm/kwiR07aZXnsKPxw==",
       "dev": true,
+      "peer": true,
       "engines": {
-        "node": ">= 10"
+        "node": ">= 6"
       }
     },
     "node_modules/@tootallnate/quickjs-emscripten": {
@@ -17980,50 +17980,6 @@
         "typescript": ">=3.2.x || >= 4.x"
       }
     },
-    "node_modules/@wessberg/ts-evaluator/node_modules/@tootallnate/once": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-1.1.2.tgz",
-      "integrity": "sha512-RbzJvlNzmRq5c3O09UipeuXno4tA1FE6ikOjxZK0tuxVv3412l64l5t1W5pj4+rJq9vpkm/kwiR07aZXnsKPxw==",
-      "dev": true,
-      "peer": true,
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/@wessberg/ts-evaluator/node_modules/acorn-globals": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/acorn-globals/-/acorn-globals-6.0.0.tgz",
-      "integrity": "sha512-ZQl7LOWaF5ePqqcX4hLuv/bLXYQNfNWw2c0/yX/TsPRKamzHcTGQnlCjHT3TsmkOUVEPS3crCxiPfdzE/Trlhg==",
-      "dev": true,
-      "peer": true,
-      "dependencies": {
-        "acorn": "^7.1.1",
-        "acorn-walk": "^7.1.1"
-      }
-    },
-    "node_modules/@wessberg/ts-evaluator/node_modules/acorn-globals/node_modules/acorn": {
-      "version": "7.4.1",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
-      "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
-      "dev": true,
-      "peer": true,
-      "bin": {
-        "acorn": "bin/acorn"
-      },
-      "engines": {
-        "node": ">=0.4.0"
-      }
-    },
-    "node_modules/@wessberg/ts-evaluator/node_modules/acorn-walk": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-7.2.0.tgz",
-      "integrity": "sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==",
-      "dev": true,
-      "peer": true,
-      "engines": {
-        "node": ">=0.4.0"
-      }
-    },
     "node_modules/@wessberg/ts-evaluator/node_modules/agent-base": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
@@ -18070,10 +18026,23 @@
         "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
-    "node_modules/@wessberg/ts-evaluator/node_modules/cssom": {
-      "version": "0.4.4",
-      "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.4.4.tgz",
-      "integrity": "sha512-p3pvU7r1MyyqbTk+WbNJIgJjG2VmTIaB10rI93LzVPrmDJKkzKYMtxxyAvQXR/NS6otuzveI7+7BBq3SjBS2mw==",
+    "node_modules/@wessberg/ts-evaluator/node_modules/cssstyle": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-2.3.0.tgz",
+      "integrity": "sha512-AZL67abkUzIuvcHqk7c09cezpGNcxUxU4Ioi/05xHk4DQeTkWmGYftIE6ctU6AEt+Gn4n1lDStOtj7FKycP71A==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "cssom": "~0.3.6"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@wessberg/ts-evaluator/node_modules/cssstyle/node_modules/cssom": {
+      "version": "0.3.8",
+      "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.3.8.tgz",
+      "integrity": "sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==",
       "dev": true,
       "peer": true
     },
@@ -18092,30 +18061,6 @@
         "node": ">=10"
       }
     },
-    "node_modules/@wessberg/ts-evaluator/node_modules/domexception": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/domexception/-/domexception-2.0.1.tgz",
-      "integrity": "sha512-yxJ2mFy/sibVQlu5qHjOkf9J3K6zgmCxgJ94u2EdvDOV09H+32LtRswEcUsmUWN72pVLOEnTSRaIVVzVQgS0dg==",
-      "deprecated": "Use your platform's native DOMException instead",
-      "dev": true,
-      "peer": true,
-      "dependencies": {
-        "webidl-conversions": "^5.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/@wessberg/ts-evaluator/node_modules/domexception/node_modules/webidl-conversions": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-5.0.0.tgz",
-      "integrity": "sha512-VlZwKPCkYKxQgeSbH5EyngOmRp7Ww7I9rQLERETtf5ofd9pGeswWiOtogpEO850jziPRarreGxn5QIiTqpb2wA==",
-      "dev": true,
-      "peer": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/@wessberg/ts-evaluator/node_modules/form-data": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/form-data/-/form-data-3.0.1.tgz",
@@ -18520,13 +18465,37 @@
       }
     },
     "node_modules/acorn-globals": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/acorn-globals/-/acorn-globals-7.0.1.tgz",
-      "integrity": "sha512-umOSDSDrfHbTNPuNpC2NSnnA3LUrqpevPb4T9jRx4MagXNS0rs+gwiTcAvqCRmsD6utzsrzNt+ebm00SNWiC3Q==",
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/acorn-globals/-/acorn-globals-6.0.0.tgz",
+      "integrity": "sha512-ZQl7LOWaF5ePqqcX4hLuv/bLXYQNfNWw2c0/yX/TsPRKamzHcTGQnlCjHT3TsmkOUVEPS3crCxiPfdzE/Trlhg==",
       "dev": true,
+      "peer": true,
       "dependencies": {
-        "acorn": "^8.1.0",
-        "acorn-walk": "^8.0.2"
+        "acorn": "^7.1.1",
+        "acorn-walk": "^7.1.1"
+      }
+    },
+    "node_modules/acorn-globals/node_modules/acorn": {
+      "version": "7.4.1",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
+      "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
+      "dev": true,
+      "peer": true,
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/acorn-globals/node_modules/acorn-walk": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-7.2.0.tgz",
+      "integrity": "sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==",
+      "dev": true,
+      "peer": true,
+      "engines": {
+        "node": ">=0.4.0"
       }
     },
     "node_modules/acorn-import-assertions": {
@@ -22443,29 +22412,24 @@
       "dev": true
     },
     "node_modules/cssom": {
-      "version": "0.5.0",
-      "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.5.0.tgz",
-      "integrity": "sha512-iKuQcq+NdHqlAcwUY0o/HL69XQrUaQdMjmStJ8JFmUaiiQErlhrmuigkg/CU4E2J0IyUKUrMAgl36TvN67MqTw==",
-      "dev": true
+      "version": "0.4.4",
+      "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.4.4.tgz",
+      "integrity": "sha512-p3pvU7r1MyyqbTk+WbNJIgJjG2VmTIaB10rI93LzVPrmDJKkzKYMtxxyAvQXR/NS6otuzveI7+7BBq3SjBS2mw==",
+      "dev": true,
+      "peer": true
     },
     "node_modules/cssstyle": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-2.3.0.tgz",
-      "integrity": "sha512-AZL67abkUzIuvcHqk7c09cezpGNcxUxU4Ioi/05xHk4DQeTkWmGYftIE6ctU6AEt+Gn4n1lDStOtj7FKycP71A==",
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-4.0.1.tgz",
+      "integrity": "sha512-8ZYiJ3A/3OkDd093CBT/0UKDWry7ak4BdPTFP2+QEP7cmhouyq/Up709ASSj2cK02BbZiMgk7kYjZNS4QP5qrQ==",
       "dev": true,
       "dependencies": {
-        "cssom": "~0.3.6"
+        "rrweb-cssom": "^0.6.0"
       },
       "engines": {
-        "node": ">=8"
+        "node": ">=18"
       }
     },
-    "node_modules/cssstyle/node_modules/cssom": {
-      "version": "0.3.8",
-      "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.3.8.tgz",
-      "integrity": "sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==",
-      "dev": true
-    },
     "node_modules/csstype": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
@@ -23265,16 +23229,27 @@
       ]
     },
     "node_modules/domexception": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/domexception/-/domexception-4.0.0.tgz",
-      "integrity": "sha512-A2is4PLG+eeSfoTMA95/s4pvAoSo2mKtiM5jlHkAVewmiO8ISFTFKZjH7UAM1Atli/OT/7JHOrJRJiMKUZKYBw==",
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/domexception/-/domexception-2.0.1.tgz",
+      "integrity": "sha512-yxJ2mFy/sibVQlu5qHjOkf9J3K6zgmCxgJ94u2EdvDOV09H+32LtRswEcUsmUWN72pVLOEnTSRaIVVzVQgS0dg==",
       "deprecated": "Use your platform's native DOMException instead",
       "dev": true,
+      "peer": true,
       "dependencies": {
-        "webidl-conversions": "^7.0.0"
+        "webidl-conversions": "^5.0.0"
       },
       "engines": {
-        "node": ">=12"
+        "node": ">=8"
+      }
+    },
+    "node_modules/domexception/node_modules/webidl-conversions": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-5.0.0.tgz",
+      "integrity": "sha512-VlZwKPCkYKxQgeSbH5EyngOmRp7Ww7I9rQLERETtf5ofd9pGeswWiOtogpEO850jziPRarreGxn5QIiTqpb2wA==",
+      "dev": true,
+      "peer": true,
+      "engines": {
+        "node": ">=8"
       }
     },
     "node_modules/domhandler": {
@@ -23500,9 +23475,9 @@
       }
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.4.623",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.623.tgz",
-      "integrity": "sha512-lKoz10iCYlP1WtRYdh5MvocQPWVRoI7ysp6qf18bmeBgR8abE6+I2CsfyNKztRDZvhdWc+krKT6wS7Neg8sw3A==",
+      "version": "1.4.625",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.625.tgz",
+      "integrity": "sha512-DENMhh3MFgaPDoXWrVIqSPInQoLImywfCwrSmVl3cf9QHzoZSiutHwGaB/Ql3VkqcQV30rzgdM+BjKqBAJxo5Q==",
       "dev": true
     },
     "node_modules/emittery": {
@@ -25819,9 +25794,9 @@
       "dev": true
     },
     "node_modules/flow-parser": {
-      "version": "0.225.1",
-      "resolved": "https://registry.npmjs.org/flow-parser/-/flow-parser-0.225.1.tgz",
-      "integrity": "sha512-50fjR6zbLQcpq5IFNkheUSY/AFPxVeeLiBM5B3NQBSKId2G0cUuExOlDDOguxc49dl9lnh8hI1xcYlPJWNp4KQ==",
+      "version": "0.226.0",
+      "resolved": "https://registry.npmjs.org/flow-parser/-/flow-parser-0.226.0.tgz",
+      "integrity": "sha512-YlH+Y/P/5s0S7Vg14RwXlJMF/JsGfkG7gcKB/zljyoqaPNX9YVsGzx+g6MLTbhZaWbPhs4347aTpmSb9GgiPtw==",
       "dev": true,
       "engines": {
         "node": ">=0.4.0"
@@ -29419,6 +29394,25 @@
         }
       }
     },
+    "node_modules/jest-environment-jsdom/node_modules/@tootallnate/once": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-2.0.0.tgz",
+      "integrity": "sha512-XCuKFP5PS55gnMVu3dty8KPatLqUoy/ZYzDzAGCQ8JNFCkLXzmI7vNHCR+XpbZaMWQK/vQubr7PkYq8g470J/A==",
+      "dev": true,
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/jest-environment-jsdom/node_modules/acorn-globals": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/acorn-globals/-/acorn-globals-7.0.1.tgz",
+      "integrity": "sha512-umOSDSDrfHbTNPuNpC2NSnnA3LUrqpevPb4T9jRx4MagXNS0rs+gwiTcAvqCRmsD6utzsrzNt+ebm00SNWiC3Q==",
+      "dev": true,
+      "dependencies": {
+        "acorn": "^8.1.0",
+        "acorn-walk": "^8.0.2"
+      }
+    },
     "node_modules/jest-environment-jsdom/node_modules/agent-base": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
@@ -29431,6 +29425,30 @@
         "node": ">= 6.0.0"
       }
     },
+    "node_modules/jest-environment-jsdom/node_modules/cssom": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.5.0.tgz",
+      "integrity": "sha512-iKuQcq+NdHqlAcwUY0o/HL69XQrUaQdMjmStJ8JFmUaiiQErlhrmuigkg/CU4E2J0IyUKUrMAgl36TvN67MqTw==",
+      "dev": true
+    },
+    "node_modules/jest-environment-jsdom/node_modules/cssstyle": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-2.3.0.tgz",
+      "integrity": "sha512-AZL67abkUzIuvcHqk7c09cezpGNcxUxU4Ioi/05xHk4DQeTkWmGYftIE6ctU6AEt+Gn4n1lDStOtj7FKycP71A==",
+      "dev": true,
+      "dependencies": {
+        "cssom": "~0.3.6"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/jest-environment-jsdom/node_modules/cssstyle/node_modules/cssom": {
+      "version": "0.3.8",
+      "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.3.8.tgz",
+      "integrity": "sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==",
+      "dev": true
+    },
     "node_modules/jest-environment-jsdom/node_modules/data-urls": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-3.0.2.tgz",
@@ -29445,6 +29463,19 @@
         "node": ">=12"
       }
     },
+    "node_modules/jest-environment-jsdom/node_modules/domexception": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/domexception/-/domexception-4.0.0.tgz",
+      "integrity": "sha512-A2is4PLG+eeSfoTMA95/s4pvAoSo2mKtiM5jlHkAVewmiO8ISFTFKZjH7UAM1Atli/OT/7JHOrJRJiMKUZKYBw==",
+      "deprecated": "Use your platform's native DOMException instead",
+      "dev": true,
+      "dependencies": {
+        "webidl-conversions": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/jest-environment-jsdom/node_modules/http-proxy-agent": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-5.0.0.tgz",
@@ -30779,18 +30810,6 @@
         }
       }
     },
-    "node_modules/jsdom/node_modules/cssstyle": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-4.0.1.tgz",
-      "integrity": "sha512-8ZYiJ3A/3OkDd093CBT/0UKDWry7ak4BdPTFP2+QEP7cmhouyq/Up709ASSj2cK02BbZiMgk7kYjZNS4QP5qrQ==",
-      "dev": true,
-      "dependencies": {
-        "rrweb-cssom": "^0.6.0"
-      },
-      "engines": {
-        "node": ">=18"
-      }
-    },
     "node_modules/jsdom/node_modules/html-encoding-sniffer": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-4.0.0.tgz",
@@ -33531,9 +33550,9 @@
       }
     },
     "node_modules/npm-packlist": {
-      "version": "8.0.1",
-      "resolved": "https://registry.npmjs.org/npm-packlist/-/npm-packlist-8.0.1.tgz",
-      "integrity": "sha512-MQpL27ZrsJQ2kiAuQPpZb5LtJwydNRnI15QWXsf3WHERu4rzjRj6Zju/My2fov7tLuu3Gle/uoIX/DDZ3u4O4Q==",
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/npm-packlist/-/npm-packlist-8.0.2.tgz",
+      "integrity": "sha512-shYrPFIS/JLP4oQmAwDyk5HcyysKW8/JLTEA32S0Z5TzvpaeeX2yMFfoK1fjEBnCBvVyIB/Jj/GBFdm0wsgzbA==",
       "dev": true,
       "dependencies": {
         "ignore-walk": "^6.0.4"
@@ -39819,9 +39838,9 @@
       }
     },
     "node_modules/serialize-javascript": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.1.tgz",
-      "integrity": "sha512-owoXEFjWRllis8/M1Q+Cw5k8ZH40e3zhp/ovX+Xr/vi1qj6QesbyXXViFbpNvWvPNAD62SutwEXavefrLJWj7w==",
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.2.tgz",
+      "integrity": "sha512-Saa1xPByTTq2gdeFZYLLo+RFE35NHZkAbqZeWNd3BpzppeVisAqpDjcp8dyf6uIvEqJRd46jemmyA4iFIeVk8g==",
       "dev": true,
       "dependencies": {
         "randombytes": "^2.1.0"
diff --git a/packages/beeq/src/components/tag/bq-tag.types.ts b/packages/beeq/src/components/tag/bq-tag.types.ts
index 17710be32..052be7c51 100644
--- a/packages/beeq/src/components/tag/bq-tag.types.ts
+++ b/packages/beeq/src/components/tag/bq-tag.types.ts
@@ -2,7 +2,7 @@ export const TAG_SIZE = ['xsmall', 'small', 'medium'] as const;
 export type TTagSize = (typeof TAG_SIZE)[number];
 
 export const TAG_COLOR = ['error', 'gray', 'info', 'success', 'warning'] as const;
-export type TTagColor = (typeof TAG_COLOR)[number] | (string & object);
+export type TTagColor = (typeof TAG_COLOR)[number];
 
 export const TAG_VARIANT = ['outline', 'filled'] as const;
 export type TTagVariant = (typeof TAG_VARIANT)[number];