diff --git a/component-library/.gitignore b/component-library/.gitignore
index 341abc10..3c687ed8 100644
--- a/component-library/.gitignore
+++ b/component-library/.gitignore
@@ -14,6 +14,7 @@ yarn-debug.log*
 yarn-error.log*
 pnpm-debug.log*
 lerna-debug.log*
+*.tsbuildinfo
 
 node_modules
 .pnpm-store
diff --git a/component-library/package.json b/component-library/package.json
index 9283008d..6276dcf0 100644
--- a/component-library/package.json
+++ b/component-library/package.json
@@ -83,6 +83,7 @@
 		"@vitejs/plugin-vue": "^6.0.0",
 		"@vitest/browser-playwright": "4.1.9",
 		"@vitest/coverage-v8": "4.1.9",
+		"@vue/compiler-sfc": "^3.5.38",
 		"@vue/eslint-config-prettier": "^10.2.0",
 		"@vue/test-utils": "^2.4.6",
 		"@vue/tsconfig": "^0.7.0",
diff --git a/component-library/pnpm-lock.yaml b/component-library/pnpm-lock.yaml
index c05c66b1..ee069903 100644
--- a/component-library/pnpm-lock.yaml
+++ b/component-library/pnpm-lock.yaml
@@ -68,6 +68,9 @@ importers:
       '@vitest/coverage-v8':
         specifier: 4.1.9
         version: 4.1.9(@vitest/browser@4.1.9)(vitest@4.1.9)
+      '@vue/compiler-sfc':
+        specifier: ^3.5.38
+        version: 3.5.38
       '@vue/eslint-config-prettier':
         specifier: ^10.2.0
         version: 10.2.0(eslint@10.5.0(jiti@2.6.1))(prettier@3.8.1)
@@ -1651,15 +1654,27 @@ packages:
   '@vue/compiler-core@3.5.27':
     resolution: {integrity: sha512-gnSBQjZA+//qDZen+6a2EdHqJ68Z7uybrMf3SPjEGgG4dicklwDVmMC1AeIHxtLVPT7sn6sH1KOO+tS6gwOUeQ==}
 
+  '@vue/compiler-core@3.5.38':
+    resolution: {integrity: sha512-s99aGxWYig9ErHbct27KXEGhrBYlRI6c4MwAgXErOAbX9xiW37/uMa+XUDO69zLz83dng8UUZ70CTOJrLrYrEQ==}
+
   '@vue/compiler-dom@3.5.27':
     resolution: {integrity: sha512-oAFea8dZgCtVVVTEC7fv3T5CbZW9BxpFzGGxC79xakTr6ooeEqmRuvQydIiDAkglZEAd09LgVf1RoDnL54fu5w==}
 
+  '@vue/compiler-dom@3.5.38':
+    resolution: {integrity: sha512-JTqp25l8aFfJYF7/KmsXZjAxJz7T+SjmTJLoXVjHtc2BrSgSiW2n9Aem/cWq1OPe68A8JL06B3eVdhlP0H4TVw==}
+
   '@vue/compiler-sfc@3.5.27':
     resolution: {integrity: sha512-sHZu9QyDPeDmN/MRoshhggVOWE5WlGFStKFwu8G52swATgSny27hJRWteKDSUUzUH+wp+bmeNbhJnEAel/auUQ==}
 
+  '@vue/compiler-sfc@3.5.38':
+    resolution: {integrity: sha512-DuA2GiZawSEW442iw/9+Fkol8hTgb4Ke5KkhmSry65QA7YuyMbIdy8p0XZRMvNwJdgRz307W8g1CSzdvS4nuNg==}
+
   '@vue/compiler-ssr@3.5.27':
     resolution: {integrity: sha512-Sj7h+JHt512fV1cTxKlYhg7qxBvack+BGncSpH+8vnN+KN95iPIcqB5rsbblX40XorP+ilO7VIKlkuu3Xq2vjw==}
 
+  '@vue/compiler-ssr@3.5.38':
+    resolution: {integrity: sha512-7s+W5Gc42FGxZMcuwl8H5B29T8BJPMdBT7KHFE+BbAuZ/iTEdTtv7z2XiMjiaUUw4w3ZcCEdHs36RuYJ2VA7bA==}
+
   '@vue/compiler-vue2@2.7.16':
     resolution: {integrity: sha512-qYC3Psj9S/mfu9uVi5WvNZIzq+xnXMhOwbTFKKDD7b1lhpnn71jXSFdTQ+WsIEk0ONCd7VV2IMm7ONl6tbQ86A==}
 
@@ -1697,6 +1712,9 @@ packages:
   '@vue/shared@3.5.27':
     resolution: {integrity: sha512-dXr/3CgqXsJkZ0n9F3I4elY8wM9jMJpP3pvRG52r6m0tu/MsAFIe6JpXVGeNMd/D9F4hQynWT8Rfuj0bdm9kFQ==}
 
+  '@vue/shared@3.5.38':
+    resolution: {integrity: sha512-FTW0AFZNaK5/mOqvGBwVfUlNLU38TiQn4+DQgIFUnrBBJQ1crMJ82yeGQLV5jyKFsO8yRukpbuP7x+nRbH6aug==}
+
   '@vue/test-utils@2.4.6':
     resolution: {integrity: sha512-FMxEjOpYNYiFe0GkaHsnJPXFHxQ6m4t8vI/ElPGpMWxZKpmRvQ33OIrvRXemy6yha03RxhOlQuy+gZMC3CQSow==}
 
@@ -2985,6 +3003,10 @@ packages:
     resolution: {integrity: sha512-pMMHxBOZKFU6HgAZ4eyGnwXF/EvPGGqUr0MnZ5+99485wwW41kW91A4LOGxSHhgugZmSChL5AlElNdwlNgcnLQ==}
     engines: {node: ^10 || ^12 || >=14}
 
+  postcss@8.5.15:
+    resolution: {integrity: sha512-FfR8sjd4em2T6fb3I2MwAJU7HWVMr9zba+enmQeeWFfCbm+UOC/0X4DS8XtpUTMwWMGbjKYP7xjfNekzyGmB3A==}
+    engines: {node: ^10 || ^12 || >=14}
+
   prelude-ls@1.2.1:
     resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
     engines: {node: '>= 0.8.0'}
@@ -4979,11 +5001,24 @@ snapshots:
       estree-walker: 2.0.2
       source-map-js: 1.2.1
 
+  '@vue/compiler-core@3.5.38':
+    dependencies:
+      '@babel/parser': 7.29.7
+      '@vue/shared': 3.5.38
+      entities: 7.0.1
+      estree-walker: 2.0.2
+      source-map-js: 1.2.1
+
   '@vue/compiler-dom@3.5.27':
     dependencies:
       '@vue/compiler-core': 3.5.27
       '@vue/shared': 3.5.27
 
+  '@vue/compiler-dom@3.5.38':
+    dependencies:
+      '@vue/compiler-core': 3.5.38
+      '@vue/shared': 3.5.38
+
   '@vue/compiler-sfc@3.5.27':
     dependencies:
       '@babel/parser': 7.29.0
@@ -4996,11 +5031,28 @@ snapshots:
       postcss: 8.5.10
       source-map-js: 1.2.1
 
+  '@vue/compiler-sfc@3.5.38':
+    dependencies:
+      '@babel/parser': 7.29.7
+      '@vue/compiler-core': 3.5.38
+      '@vue/compiler-dom': 3.5.38
+      '@vue/compiler-ssr': 3.5.38
+      '@vue/shared': 3.5.38
+      estree-walker: 2.0.2
+      magic-string: 0.30.21
+      postcss: 8.5.15
+      source-map-js: 1.2.1
+
   '@vue/compiler-ssr@3.5.27':
     dependencies:
       '@vue/compiler-dom': 3.5.27
       '@vue/shared': 3.5.27
 
+  '@vue/compiler-ssr@3.5.38':
+    dependencies:
+      '@vue/compiler-dom': 3.5.38
+      '@vue/shared': 3.5.38
+
   '@vue/compiler-vue2@2.7.16':
     dependencies:
       de-indent: 1.0.2
@@ -5062,6 +5114,8 @@ snapshots:
 
   '@vue/shared@3.5.27': {}
 
+  '@vue/shared@3.5.38': {}
+
   '@vue/test-utils@2.4.6':
     dependencies:
       js-beautify: 1.15.4
@@ -5257,7 +5311,7 @@ snapshots:
 
   constantinople@4.0.1:
     dependencies:
-      '@babel/parser': 7.29.0
+      '@babel/parser': 7.29.7
       '@babel/types': 7.29.0
 
   convert-source-map@2.0.0: {}
@@ -6517,6 +6571,12 @@ snapshots:
       picocolors: 1.1.1
       source-map-js: 1.2.1
 
+  postcss@8.5.15:
+    dependencies:
+      nanoid: 3.3.15
+      picocolors: 1.1.1
+      source-map-js: 1.2.1
+
   prelude-ls@1.2.1: {}
 
   prettier-linter-helpers@1.0.1:
@@ -7128,7 +7188,7 @@ snapshots:
       '@babel/parser': 7.29.0
       '@babel/types': 7.29.0
       '@vue/compiler-dom': 3.5.27
-      '@vue/compiler-sfc': 3.5.27
+      '@vue/compiler-sfc': 3.5.38
       ast-types: 0.16.1
       esm-resolve: 1.0.11
       hash-sum: 2.0.0
@@ -7208,7 +7268,7 @@ snapshots:
 
   with@7.0.2:
     dependencies:
-      '@babel/parser': 7.29.0
+      '@babel/parser': 7.29.7
       '@babel/types': 7.29.0
       assert-never: 1.4.0
       babel-walk: 3.0.0-canary-5
diff --git a/component-library/src/components/custom/BccAppNavigation/BccAppNavigation.vue b/component-library/src/components/custom/BccAppNavigation/BccAppNavigation.vue
index 04dc96ba..3ee9d665 100644
--- a/component-library/src/components/custom/BccAppNavigation/BccAppNavigation.vue
+++ b/component-library/src/components/custom/BccAppNavigation/BccAppNavigation.vue
@@ -46,6 +46,16 @@ const itemWidth = computed(() => {
 
 	return 'flex-1';
 });
+
+function itemBindings(item: BccAppNavigationItem) {
+	const { icon, key, component, ...rest } = item;
+
+	void icon;
+	void key;
+	void component;
+
+	return rest;
+}
 </script>
 
 <template>
@@ -54,10 +64,15 @@ const itemWidth = computed(() => {
 			<template v-for="item in items" :key="item.key">
 				<component
 					:is="item.component ?? linkComponent ?? 'a'"
-					v-bind="item"
+					v-bind="itemBindings(item)"
 					class="bcc-app-nav-item"
+					:data-key="item.key"
 					active-class="bcc-app-nav-item--active"
-					:class="{ 'bcc-app-nav-item--active': activeKey === item.key, [itemWidth]: true }"
+					:class="{
+						'bcc-app-nav-item--active': activeKey === item.key,
+						[itemWidth]: true,
+						[`bcc-app-nav-item-key-${item.key}`]: true,
+					}"
 					@click="emits('select', item)"
 				>
 					<div class="relative px-3">
diff --git a/component-library/tsconfig.node.json b/component-library/tsconfig.node.json
index e0f0336b..efc61931 100644
--- a/component-library/tsconfig.node.json
+++ b/component-library/tsconfig.node.json
@@ -7,5 +7,5 @@
 		"types": ["Node"],
 		"strict": true
 	},
-	"include": ["vite.config.ts", "scripts/**/*.mjs"]
+	"include": ["vite.config.ts", "vite-plugin-component-attr.ts", "scripts/**/*.mjs"]
 }
diff --git a/component-library/vite-plugin-component-attr.ts b/component-library/vite-plugin-component-attr.ts
new file mode 100644
index 00000000..772a0133
--- /dev/null
+++ b/component-library/vite-plugin-component-attr.ts
@@ -0,0 +1,44 @@
+import { parse } from '@vue/compiler-sfc';
+import path from 'node:path';
+import type { Plugin } from 'vite';
+
+/**
+ * Injects `data-component="<ComponentName>"` on the root element of every
+ * Vue SFC found under a `/components/` path segment. Runs before plugin-vue
+ * so the attribute is part of the compiled output.
+ */
+export function componentDataAttrPlugin(): Plugin {
+	return {
+		name: 'bcc-component-data-attr',
+		enforce: 'pre',
+		transform(code, id) {
+			if (!id.endsWith('.vue') || !id.includes('/components/')) return null;
+
+			const componentName = path
+				.basename(id, '.vue')
+				.replace(/^Bcc/, '')
+				.replace(/([A-Z])/g, (_, c, offset) => (offset === 0 ? c.toLowerCase() : `-${c.toLowerCase()}`));
+			const { descriptor, errors } = parse(code);
+
+			if (errors.length || !descriptor.template?.ast) return null;
+
+			const { ast } = descriptor.template;
+
+			// Find the first element node in the template root (NodeTypes.ELEMENT === 1)
+			const root = ast.children.find(n => n.type === 1);
+			if (!root) return null;
+
+			// ElementNode has `tag` and `loc` — cast from TemplateChildNode
+			const el = root as { tag: string; loc: { start: { offset: number } } };
+
+			// root.loc.start.offset is absolute (relative to the SFC file start),
+			// so insert right after `<tagName` with no further adjustment
+			const insertAt = root.loc.start.offset + 1 + el.tag.length;
+
+			return {
+				code: code.slice(0, insertAt) + ` data-bcc-name="${componentName}"` + code.slice(insertAt),
+				map: null,
+			};
+		},
+	};
+}
diff --git a/component-library/vite.config.ts b/component-library/vite.config.ts
index eed75a35..c5078718 100644
--- a/component-library/vite.config.ts
+++ b/component-library/vite.config.ts
@@ -3,11 +3,12 @@ import vue from '@vitejs/plugin-vue';
 import { fileURLToPath } from 'node:url';
 import { resolve } from 'path';
 import { defineConfig } from 'vite';
+import { componentDataAttrPlugin } from './vite-plugin-component-attr';
 
 const __dirname = fileURLToPath(new URL('.', import.meta.url));
 
 export default defineConfig({
-	plugins: [vue(), tailwindcss()],
+	plugins: [componentDataAttrPlugin(), vue(), tailwindcss()],
 	resolve: {
 		alias: {
 			'@': resolve(__dirname, './src'),