From 6a185572060c8063b1a4d96e6ba3cf5d1a647fee Mon Sep 17 00:00:00 2001
From: jvictordev1 <jvictordev1@gmail.com>
Date: Wed, 14 Jan 2026 16:39:01 -0300
Subject: [PATCH 1/2] feat: atualiza componente para composition api e adiciona
 prop de variant

---
 package.json                  |  2 +-
 src/components/Breadcrumb.vue | 94 ++++++++++++++++++++---------------
 2 files changed, 54 insertions(+), 42 deletions(-)

diff --git a/package.json b/package.json
index a7fa4f8e..b6187dee 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@sysvale/cuida",
-	"version": "3.152.0",
+	"version": "3.152.1",
 	"description": "A design system built by Sysvale, using storybook and Vue components",
 	"repository": {
 		"type": "git",
diff --git a/src/components/Breadcrumb.vue b/src/components/Breadcrumb.vue
index cc5a3aaf..f309f7e1 100644
--- a/src/components/Breadcrumb.vue
+++ b/src/components/Breadcrumb.vue
@@ -12,7 +12,7 @@
 				>
 					<router-link
 						:to="routerPushTo(item)"
-						class="breadcrumb__link"
+						:class="`breadcrumb__link--${variant}`"
 					>
 						<CdsIcon
 							v-if="items.length <= 2"
@@ -49,7 +49,7 @@
 
 					<router-link
 						:to="routerPushTo(item)"
-						class="breadcrumb__link"
+						:class="`breadcrumb__link--${variant}`"
 					>
 						<CdsClickable :clickable="index !== items.length - 1">
 							{{ item.label }}
@@ -61,43 +61,43 @@
 	</nav>
 </template>
 
-<script>
+<script setup>
 import CdsIcon from './Icon.vue';
 import CdsSpacer from './Spacer.vue';
 import CdsClickable from './Clickable.vue';
 import isEmpty from 'lodash.isempty';
 
-export default {
-	name: 'CdsBreadcrumb',
-	components: {
-		CdsIcon,
-		CdsSpacer,
-		CdsClickable,
+defineOptions({ name: 'CdsBreadcrumb' });
+
+defineProps({
+	/**
+	 * Define a lista dos itens do Breadcrumb a serem
+	 * mostrados. Os itens da lista devem ser
+	 * objetos com path ou route, e com uma label.
+	 */
+	items: {
+		type: Array,
+		default: () => ([]),
+		required: true,
 	},
-	props: {
-		/**
-		 * Define a lista dos itens do Breadcrumb a serem
-		 * mostrados. Os itens da lista devem ser
-		 * objetos com path ou route, e com uma label.
-		 */
-		items: {
-			type: Array,
-			default: () => ([]),
-			required: true,
-		},
+	/**
+	 * A variante de cor. São 10 variantes:
+	* @values green, teal, blue, indigo, violet, pink, red, orange, amber, dark
+	 */
+	variant: {
+		type: String,
+		default: 'blue',
 	},
+});
 
-	methods: {
-		resolveRoute({ route, path }) {
-			const to = isEmpty(route) ? path : route;
-			return to instanceof String ? { path: to } : to;
-		},
+function resolveRoute({ route, path }) {
+	const to = isEmpty(route) ? path : route;
+	return to instanceof String ? { path: to } : to;
+}
 
-		routerPushTo(item) {
-			return this.resolveRoute(item) ? this.resolveRoute(item).path : null;
-		},
-	},
-};
+function routerPushTo(item) {
+	return resolveRoute(item) ? resolveRoute(item).path : null;
+}
 </script>
 
 <style lang="scss" scoped>
@@ -113,18 +113,30 @@ export default {
 	}
 
 	&__link {
-		@extend .breadcrumb;
-		@include tokens.caption;
-		color: tokens.$n-600;
-		border-radius: tokens.$border-radius-lil;
-		padding: tokens.pa(1);
-		transition: tokens.$hover;
-
-		&:hover,
-		&:hover svg {
-			background-color: tokens.$bn-50;
-			color: tokens.$bn-600;
+		@include tokens.variantResolver using (
+			$color-name,
+			$shade-50,
+			$shade-100,
+			$shade-200,
+			$shade-300,
+			$base-color,
+			$shade-500,
+			$shade-600
+		) {
+			@extend .breadcrumb;
+			@include tokens.caption;
+
+			border-radius: tokens.$border-radius-lil;
+			padding: tokens.pa(1);
 			transition: tokens.$hover;
+			color: tokens.$n-600;
+
+			&:hover,
+			&:hover svg {
+				background-color: $shade-50;
+				color: $shade-600;
+				transition: tokens.$hover;
+			}
 		}
 	}
 

From 0f4e2a11028f4de22d7a2b794bab09907919059e Mon Sep 17 00:00:00 2001
From: jvictordev1 <jvictordev1@gmail.com>
Date: Thu, 15 Jan 2026 10:48:43 -0300
Subject: [PATCH 2/2] =?UTF-8?q?refactor:=20aplica=20estilos=20base=20aos?=
 =?UTF-8?q?=20itens=20do=20breadcrumb=20quando=20a=20variant=20for=20inv?=
 =?UTF-8?q?=C3=A1lida?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Breadcrumb.vue | 19 +++++++++----------
 1 file changed, 9 insertions(+), 10 deletions(-)

diff --git a/src/components/Breadcrumb.vue b/src/components/Breadcrumb.vue
index f309f7e1..feebaf74 100644
--- a/src/components/Breadcrumb.vue
+++ b/src/components/Breadcrumb.vue
@@ -12,7 +12,7 @@
 				>
 					<router-link
 						:to="routerPushTo(item)"
-						:class="`breadcrumb__link--${variant}`"
+						:class="`breadcrumb__link breadcrumb__link--${variant}`"
 					>
 						<CdsIcon
 							v-if="items.length <= 2"
@@ -49,7 +49,7 @@
 
 					<router-link
 						:to="routerPushTo(item)"
-						:class="`breadcrumb__link--${variant}`"
+						:class="`breadcrumb__link breadcrumb__link--${variant}`"
 					>
 						<CdsClickable :clickable="index !== items.length - 1">
 							{{ item.label }}
@@ -104,6 +104,7 @@ function routerPushTo(item) {
 @use '../assets/sass/tokens/index' as tokens;
 
 .breadcrumb {
+	@include tokens.caption;
 	display: flex;
 	align-items: center;
 	padding: tokens.pa(0);
@@ -113,6 +114,12 @@ function routerPushTo(item) {
 	}
 
 	&__link {
+		@extend .breadcrumb;
+		border-radius: tokens.$border-radius-lil;
+		padding: tokens.pa(1);
+		transition: tokens.$hover;
+		color: tokens.$n-600;
+
 		@include tokens.variantResolver using (
 			$color-name,
 			$shade-50,
@@ -123,14 +130,6 @@ function routerPushTo(item) {
 			$shade-500,
 			$shade-600
 		) {
-			@extend .breadcrumb;
-			@include tokens.caption;
-
-			border-radius: tokens.$border-radius-lil;
-			padding: tokens.pa(1);
-			transition: tokens.$hover;
-			color: tokens.$n-600;
-
 			&:hover,
 			&:hover svg {
 				background-color: $shade-50;