From b31860d42c3f96552bb0f49b952b4032b404f7d5 Mon Sep 17 00:00:00 2001
From: Edvin Covaci <edvincov28@gmail.com>
Date: Wed, 14 Oct 2026 13:50:07 +0200
Subject: [PATCH 1/2] Use medium font weight for BccAvatar labels

---
 .../src/components/wrapped/BccAvatar/BccAvatar.css              | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/component-library/src/components/wrapped/BccAvatar/BccAvatar.css b/component-library/src/components/wrapped/BccAvatar/BccAvatar.css
index a2f33aa0..b8aa03bd 100644
--- a/component-library/src/components/wrapped/BccAvatar/BccAvatar.css
+++ b/component-library/src/components/wrapped/BccAvatar/BccAvatar.css
@@ -3,7 +3,7 @@
 	.bcc-avatar {
 		--bcc-avatar-border: var(--ctx-border);
 		--p-icon-size: var(--icon-size-sm);
-		@apply ctx-gray-subtler shrink-0 overflow-hidden text-sm;
+		@apply ctx-gray-subtler shrink-0 overflow-hidden text-sm font-medium;
 	}
 
 	.bcc-avatar.male,

From 3f6101e86133d9ee640dd0ca32899e9e65e3e49d Mon Sep 17 00:00:00 2001
From: Edvin Covaci <edvincov28@gmail.com>
Date: Wed, 14 Oct 2026 13:56:50 +0200
Subject: [PATCH 2/2] Use semibold for BccAvatar initials and medium for +N
 labels

---
 .../src/components/wrapped/BccAvatar/BccAvatar.css           | 5 ++++-
 .../src/components/wrapped/BccAvatar/BccAvatar.vue           | 4 +++-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/component-library/src/components/wrapped/BccAvatar/BccAvatar.css b/component-library/src/components/wrapped/BccAvatar/BccAvatar.css
index b8aa03bd..dfe4bc6a 100644
--- a/component-library/src/components/wrapped/BccAvatar/BccAvatar.css
+++ b/component-library/src/components/wrapped/BccAvatar/BccAvatar.css
@@ -3,7 +3,7 @@
 	.bcc-avatar {
 		--bcc-avatar-border: var(--ctx-border);
 		--p-icon-size: var(--icon-size-sm);
-		@apply ctx-gray-subtler shrink-0 overflow-hidden text-sm font-medium;
+		@apply ctx-gray-subtler shrink-0 overflow-hidden text-sm font-semibold;
 	}
 
 	.bcc-avatar.male,
@@ -30,6 +30,9 @@
 	.bcc-avatar.F.child {
 		@apply ctx-magenta-subtler;
 	}
+	.bcc-avatar.count {
+		@apply font-medium;
+	}
 	.bcc-avatar.bordered {
 		@apply border-ctx border-2;
 	}
diff --git a/component-library/src/components/wrapped/BccAvatar/BccAvatar.vue b/component-library/src/components/wrapped/BccAvatar/BccAvatar.vue
index 21cf91d6..7b1abc27 100644
--- a/component-library/src/components/wrapped/BccAvatar/BccAvatar.vue
+++ b/component-library/src/components/wrapped/BccAvatar/BccAvatar.vue
@@ -26,6 +26,8 @@ const bindings = computed(() => {
 	void icon;
 	return rest;
 });
+
+const isCount = computed(() => /^\+\d/.test(props.label ?? ''));
 </script>
 
 <template>
@@ -33,7 +35,7 @@ const bindings = computed(() => {
 		v-bind="bindings"
 		class="bcc-avatar"
 		:shape="squared ? 'square' : 'circle'"
-		:class="[gender, size, { child, bordered, squared }]"
+		:class="[gender, size, { child, bordered, squared, count: isCount }]"
 	>
 		<template v-if="icon" #icon>
 			<component :is="typeof icon === 'boolean' ? PersonFillIcon : icon" class="p-icon" />