test: fix unit tests in design-system

packages/design-system/src/__tests__/setup.ts

@@ -1 +1,5 @@
 import '@testing-library/jest-dom';
+import { config } from '@vue/test-utils';
+import { N8nPlugin } from '@/plugin';
+
+config.global.plugins = [N8nPlugin];

packages/design-system/src/components/N8nActionBox/__tests__/ActionBox.spec.ts

@@ -11,7 +11,9 @@ describe('N8NActionBox', () => {
 					'Long description that you should know something is the way it is because of how it is. ',
 				buttonText: 'Do something',
 			},
+			global: {
 				stubs: ['n8n-heading', 'n8n-text', 'n8n-button', 'n8n-callout'],
+			},
 		});
 		expect(wrapper.html()).toMatchSnapshot();
 	});

packages/design-system/src/components/N8nActionBox/__tests__/__snapshots__/ActionBox.spec.ts.snap

@@ -3,10 +3,13 @@
 exports[`N8NActionBox > should render correctly 1`] = `
 "<div class=\\"n8n-action-box container\\" data-test-id=\\"action-box\\">
   <div class=\\"emoji\\">😿</div>
-  <div class=\\"heading\\"><span class=\\"n8n-heading align-center size-xlarge regular\\">Headline you need to know</span></div>
+  <div class=\\"heading\\">
-  <div class=\\"description\\"><span class=\\"n8n-text text-base size-medium regular\\"><span>Long description that you should know something is the way it is because of how it is. </span></span></div><button class=\\"button button primary large\\" aria-live=\\"polite\\">
+    <n8n-heading-stub align=\\"center\\" tag=\\"span\\" bold=\\"false\\" size=\\"xlarge\\"></n8n-heading-stub>
-    <!--v-if--><span>Do something</span>
+  </div>
-  </button>
+  <div class=\\"description\\">
+    <n8n-text-stub color=\\"text-base\\" bold=\\"false\\" size=\\"medium\\" compact=\\"false\\" tag=\\"span\\"></n8n-text-stub>
+  </div>
+  <n8n-button-stub label=\\"Do something\\" type=\\"primary\\" size=\\"large\\" loading=\\"false\\" disabled=\\"false\\" outline=\\"false\\" text=\\"false\\" block=\\"false\\" active=\\"false\\" square=\\"false\\"></n8n-button-stub>
   <!--v-if-->
 </div>"
 `;

packages/design-system/src/components/N8nActionDropdown/__tests__/ActionDropdown.spec.ts

@@ -6,6 +6,7 @@ describe('components', () => {
 		it('should render default styling correctly', () => {
 			const wrapper = render(N8nActionDropdown, {
 				props: {
+					teleported: false,
 					items: [
 						{
 							id: 'item1',
@@ -17,10 +18,13 @@ describe('components', () => {
 						},
 					],
 				},
-				stubs: ['n8n-icon', 'el-dropdown', 'el-dropdown-menu', 'el-dropdown-item'],
+				global: {
+					stubs: ['n8n-icon', 'el-tooltip', 'el-dropdown', 'el-dropdown-menu', 'el-dropdown-item'],
+				},
 			});
 			expect(wrapper.html()).toMatchSnapshot();
 		});
+
 		it('should render custom styling correctly', () => {
 			const wrapper = render(N8nActionDropdown, {
 				props: {
@@ -44,7 +48,9 @@ describe('components', () => {
 						},
 					],
 				},
+				global: {
 					stubs: ['n8n-icon', 'el-dropdown', 'el-dropdown-menu', 'el-dropdown-item'],
+				},
 			});
 			expect(wrapper.html()).toMatchSnapshot();
 		});

packages/design-system/src/components/N8nActionDropdown/__tests__/__snapshots__/ActionDropdown.spec.ts.snap

@@ -2,22 +2,12 @@
 
 exports[`components > N8nActionDropdown > should render custom styling correctly 1`] = `
 "<div class=\\"action-dropdown-container actionDropdownContainer\\">
-  <div class=\\"el-dropdown\\">
+  <el-dropdown-stub trigger=\\"click\\" effect=\\"light\\" placement=\\"bottom\\" popperoptions=\\"[object Object]\\" size=\\"\\" splitbutton=\\"false\\" hideonclick=\\"true\\" loop=\\"true\\" showtimeout=\\"150\\" hidetimeout=\\"150\\" tabindex=\\"0\\" maxheight=\\"\\" popperclass=\\"\\" disabled=\\"false\\" role=\\"menu\\" teleported=\\"true\\"></el-dropdown-stub>
-    <div class=\\"activator el-tooltip__trigger el-tooltip__trigger\\" id=\\"el-id-7552-4\\" role=\\"button\\" tabindex=\\"0\\" aria-controls=\\"el-id-7552-5\\" aria-expanded=\\"false\\" aria-haspopup=\\"menu\\"><span class=\\"n8n-text compact size-medium regular n8n-icon n8n-icon\\"><!----></span></div>
-    <!--teleport start-->
-    <!--teleport end-->
-    <!--v-if-->
-  </div>
 </div>"
 `;
 
 exports[`components > N8nActionDropdown > should render default styling correctly 1`] = `
-"<div class=\\"action-dropdown-container actionDropdownContainer\\">
+"<div class=\\"action-dropdown-container actionDropdownContainer\\" teleported=\\"false\\">
-  <div class=\\"el-dropdown\\">
+  <el-dropdown-stub trigger=\\"click\\" effect=\\"light\\" placement=\\"bottom\\" popperoptions=\\"[object Object]\\" size=\\"\\" splitbutton=\\"false\\" hideonclick=\\"true\\" loop=\\"true\\" showtimeout=\\"150\\" hidetimeout=\\"150\\" tabindex=\\"0\\" maxheight=\\"\\" popperclass=\\"\\" disabled=\\"false\\" role=\\"menu\\" teleported=\\"true\\"></el-dropdown-stub>
-    <div class=\\"activator el-tooltip__trigger el-tooltip__trigger\\" id=\\"el-id-7552-0\\" role=\\"button\\" tabindex=\\"0\\" aria-controls=\\"el-id-7552-1\\" aria-expanded=\\"false\\" aria-haspopup=\\"menu\\"><span class=\\"n8n-text compact size-medium regular n8n-icon n8n-icon\\"><!----></span></div>
-    <!--teleport start-->
-    <!--teleport end-->
-    <!--v-if-->
-  </div>
 </div>"
 `;

packages/design-system/src/components/N8nAlert/__tests__/Alert.spec.ts

@@ -14,9 +14,7 @@ describe('components', () => {
 		});
 
 		it('should render slots instead of props', () => {
-			const { container } = render(
+			const { container } = render(N8nAlert, {
-				N8nAlert,
-				{
 				props: { showIcon: false },
 				slots: {
 					title: 'Title',
@@ -24,11 +22,12 @@ describe('components', () => {
 					aside: '<button>Click me</button>',
 					icon: '<n8n-icon icon="plus-circle" />',
 				},
+				global: {
+					components: {
+						'n8n-icon': N8nIcon,
 					},
-				(localVue) => {
-					localVue.component('n8n-icon', N8nIcon);
 				},
-			);
+			});
 			expect(screen.getByRole('alert')).toBeVisible();
 			expect(screen.getByText('Title')).toBeVisible();
 			expect(screen.getByText('Message')).toBeVisible();

packages/design-system/src/components/N8nBadge/__tests__/Badge.spec.ts

@@ -14,7 +14,9 @@ describe('components', () => {
 					slots: {
 						default: '<n8n-text>Default badge</n8n-text>',
 					},
+					global: {
 						stubs: ['n8n-text'],
+					},
 				});
 				expect(wrapper.html()).toMatchSnapshot();
 			});
@@ -28,7 +30,9 @@ describe('components', () => {
 					slots: {
 						default: '<n8n-text>Secondary badge</n8n-text>',
 					},
+					global: {
 						stubs: ['n8n-text'],
+					},
 				});
 				expect(wrapper.html()).toMatchSnapshot();
 			});
@@ -37,7 +41,9 @@ describe('components', () => {
 					slots: {
 						default: '<n8n-text>A Badge</n8n-text>',
 					},
+					global: {
 						stubs: ['n8n-text'],
+					},
 				});
 				expect(wrapper.html()).toMatchSnapshot();
 			});

packages/design-system/src/components/N8nBadge/__tests__/__snapshots__/Badge.spec.ts.snap

@@ -1,7 +1,7 @@
 // Vitest Snapshot v1
 
-exports[`components > N8nBadge > props > should render default theme correctly 1`] = `"<span class=\\"n8n-badge default\\"><span class=\\"n8n-text compact size-large bold\\"><n8n-text>Default badge</n8n-text></span></span>"`;
+exports[`components > N8nBadge > props > should render default theme correctly 1`] = `"<span class=\\"n8n-badge default\\"><n8n-text-stub bold=\\"true\\" size=\\"large\\" compact=\\"true\\" tag=\\"span\\"></n8n-text-stub></span>"`;
 
-exports[`components > N8nBadge > props > should render secondary theme correctly 1`] = `"<span class=\\"n8n-badge secondary\\"><span class=\\"n8n-text compact size-medium regular\\"><n8n-text>Secondary badge</n8n-text></span></span>"`;
+exports[`components > N8nBadge > props > should render secondary theme correctly 1`] = `"<span class=\\"n8n-badge secondary\\"><n8n-text-stub bold=\\"false\\" size=\\"medium\\" compact=\\"true\\" tag=\\"span\\"></n8n-text-stub></span>"`;
 
-exports[`components > N8nBadge > props > should render with default values correctly 1`] = `"<span class=\\"n8n-badge default\\"><span class=\\"n8n-text compact size-small regular\\"><n8n-text>A Badge</n8n-text></span></span>"`;
+exports[`components > N8nBadge > props > should render with default values correctly 1`] = `"<span class=\\"n8n-badge default\\"><n8n-text-stub bold=\\"false\\" size=\\"small\\" compact=\\"true\\" tag=\\"span\\"></n8n-text-stub></span>"`;

packages/design-system/src/components/N8nButton/__tests__/Button.spec.ts

@@ -12,7 +12,9 @@ describe('components', () => {
 		it('should render correctly', () => {
 			const wrapper = render(N8nButton, {
 				slots,
+				global: {
 					stubs,
+				},
 			});
 			expect(wrapper.html()).toMatchSnapshot();
 		});
@@ -25,7 +27,9 @@ describe('components', () => {
 							loading: true,
 						},
 						slots,
+						global: {
 							stubs,
+						},
 					});
 					expect(wrapper.html()).toMatchSnapshot();
 				});
@@ -38,7 +42,9 @@ describe('components', () => {
 							icon: 'plus-circle',
 						},
 						slots,
+						global: {
 							stubs,
+						},
 					});
 					expect(wrapper.html()).toMatchSnapshot();
 				});
@@ -51,7 +57,9 @@ describe('components', () => {
 							square: true,
 							label: '48',
 						},
+						global: {
 							stubs,
+						},
 					});
 					expect(wrapper.html()).toMatchSnapshot();
 				});
@@ -65,7 +73,9 @@ describe('components', () => {
 						icon: 'plus-circle',
 					},
 					slots,
+					global: {
 						stubs,
+					},
 				});
 
 				expect(wrapper.html()).toMatchSnapshot();
@@ -78,7 +88,9 @@ describe('components', () => {
 						type: 'secondary',
 					},
 					slots,
+					global: {
 						stubs,
+					},
 				});
 
 				expect(wrapper.html()).toMatchSnapshot();
@@ -91,7 +103,9 @@ describe('components', () => {
 						type: 'text',
 					},
 					slots,
+					global: {
 						stubs,
+					},
 				});
 
 				expect(wrapper.html()).toMatchSnapshot();
@@ -104,7 +118,9 @@ describe('components', () => {
 						type: 'info',
 					},
 					slots,
+					global: {
 						stubs,
+					},
 				});
 
 				expect(wrapper.html()).toMatchSnapshot();

packages/design-system/src/components/N8nButton/__tests__/__snapshots__/Button.spec.ts.snap

@@ -1,16 +1,16 @@
 // Vitest Snapshot v1
 
-exports[`components > N8nButton > overrides > should render as \`secondary\` when \`text\` is given as type 1`] = `"<button class=\\"button button text medium withIcon\\" aria-live=\\"polite\\"><span class=\\"icon\\"><span class=\\"n8n-text compact size-medium regular n8n-icon n8n-icon\\"><!----></span></span><span>Button</span></button>"`;
+exports[`components > N8nButton > overrides > should render as \`secondary\` when \`text\` is given as type 1`] = `"<button class=\\"button button text medium withIcon\\" aria-live=\\"polite\\"><span class=\\"icon\\"><n8n-icon-stub icon=\\"plus-circle\\" size=\\"medium\\" spin=\\"false\\"></n8n-icon-stub></span><span>Button</span></button>"`;
 
-exports[`components > N8nButton > overrides > should render as \`tertiary\` when \`info\` is given as type 1`] = `"<button class=\\"button button info medium withIcon\\" aria-live=\\"polite\\"><span class=\\"icon\\"><span class=\\"n8n-text compact size-medium regular n8n-icon n8n-icon\\"><!----></span></span><span>Button</span></button>"`;
+exports[`components > N8nButton > overrides > should render as \`tertiary\` when \`info\` is given as type 1`] = `"<button class=\\"button button info medium withIcon\\" aria-live=\\"polite\\"><span class=\\"icon\\"><n8n-icon-stub icon=\\"plus-circle\\" size=\\"medium\\" spin=\\"false\\"></n8n-icon-stub></span><span>Button</span></button>"`;
 
-exports[`components > N8nButton > overrides > should use default (\`primary\`) type when no type is given 1`] = `"<button class=\\"button button primary medium withIcon\\" aria-live=\\"polite\\"><span class=\\"icon\\"><span class=\\"n8n-text compact size-medium regular n8n-icon n8n-icon\\"><!----></span></span><span>Button</span></button>"`;
+exports[`components > N8nButton > overrides > should use default (\`primary\`) type when no type is given 1`] = `"<button class=\\"button button primary medium withIcon\\" aria-live=\\"polite\\"><span class=\\"icon\\"><n8n-icon-stub icon=\\"plus-circle\\" size=\\"medium\\" spin=\\"false\\"></n8n-icon-stub></span><span>Button</span></button>"`;
 
-exports[`components > N8nButton > overrides > should use given (\`secondary\`) type 1`] = `"<button class=\\"button button secondary medium withIcon\\" aria-live=\\"polite\\"><span class=\\"icon\\"><span class=\\"n8n-text compact size-medium regular n8n-icon n8n-icon\\"><!----></span></span><span>Button</span></button>"`;
+exports[`components > N8nButton > overrides > should use given (\`secondary\`) type 1`] = `"<button class=\\"button button secondary medium withIcon\\" aria-live=\\"polite\\"><span class=\\"icon\\"><n8n-icon-stub icon=\\"plus-circle\\" size=\\"medium\\" spin=\\"false\\"></n8n-icon-stub></span><span>Button</span></button>"`;
 
-exports[`components > N8nButton > props > icon > should render icon button 1`] = `"<button class=\\"button button primary medium withIcon\\" aria-live=\\"polite\\"><span class=\\"icon\\"><span class=\\"n8n-text compact size-medium regular n8n-icon n8n-icon\\"><!----></span></span><span>Button</span></button>"`;
+exports[`components > N8nButton > props > icon > should render icon button 1`] = `"<button class=\\"button button primary medium withIcon\\" aria-live=\\"polite\\"><span class=\\"icon\\"><n8n-icon-stub icon=\\"plus-circle\\" size=\\"medium\\" spin=\\"false\\"></n8n-icon-stub></span><span>Button</span></button>"`;
 
-exports[`components > N8nButton > props > loading > should render loading spinner 1`] = `"<button class=\\"button button primary medium loading withIcon\\" disabled=\\"\\" aria-busy=\\"true\\" aria-live=\\"polite\\"><span class=\\"icon\\"><span class=\\"n8n-spinner\\"><span class=\\"n8n-text compact size-medium regular n8n-icon n8n-icon\\"><!----></span></span></span><span>Button</span></button>"`;
+exports[`components > N8nButton > props > loading > should render loading spinner 1`] = `"<button class=\\"button button primary medium loading withIcon\\" disabled=\\"\\" aria-busy=\\"true\\" aria-live=\\"polite\\"><span class=\\"icon\\"><n8n-spinner-stub size=\\"medium\\" type=\\"dots\\"></n8n-spinner-stub></span><span>Button</span></button>"`;
 
 exports[`components > N8nButton > props > square > should render square button 1`] = `
 "<button class=\\"button button primary medium square\\" aria-live=\\"polite\\">

packages/design-system/src/components/N8nButton/overrides/ElButton.ts

@@ -1,4 +0,0 @@
-import ElButton from './ElButton.vue';
-
-export { ElButton };
-export default ElButton;

packages/design-system/src/components/N8nButton/overrides/ElButton.vue

@@ -1,51 +0,0 @@
-<template>
-	<n8n-button ref="button" v-bind="attrs">
-		<slot />
-	</n8n-button>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-import N8nButton from '../Button.vue';
-
-const classToTypeMap = {
-	'btn--cancel': 'secondary',
-	'el-picker-panel__link-btn': 'secondary',
-};
-
-type ButtonRef = InstanceType<typeof N8nButton>;
-
-export default defineComponent({
-	components: {
-		N8nButton,
-	},
-	computed: {
-		attrs() {
-			let type = this.$attrs.type || 'primary';
-
-			/* Element UI Button can have 'text' or 'info' type which is not supported by n8n-button
-			 so render it as 'secondary' or 'tertiary' */
-			if (type === 'text') {
-				type = 'secondary';
-			}
-
-			if (type === 'info') {
-				type = 'tertiary';
-			}
-
-			Object.entries(classToTypeMap).forEach(([className, mappedType]) => {
-				if ((this.$refs.button as ButtonRef)?.$el.classList.contains(className)) {
-					type = mappedType;
-				}
-			});
-
-			delete this.$attrs.type;
-
-			return {
-				...this.$attrs,
-				type,
-			};
-		},
-	},
-});
-</script>

packages/design-system/src/components/N8nButton/overrides/index.ts

@@ -1 +0,0 @@
-export { default as N8nElButton } from './ElButton.vue';

packages/design-system/src/components/N8nCallout/__tests__/Callout.spec.ts

@@ -8,7 +8,9 @@ describe('components', () => {
 				props: {
 					theme: 'info',
 				},
+				global: {
 					stubs: ['n8n-icon', 'n8n-text'],
+				},
 				slots: {
 					default: '<n8n-text size="small">This is an info callout.</n8n-text>',
 				},
@@ -20,7 +22,9 @@ describe('components', () => {
 				props: {
 					theme: 'success',
 				},
+				global: {
 					stubs: ['n8n-icon', 'n8n-text'],
+				},
 				slots: {
 					default: '<n8n-text size="small">This is a success callout.</n8n-text>',
 				},
@@ -32,7 +36,9 @@ describe('components', () => {
 				props: {
 					theme: 'warning',
 				},
+				global: {
 					stubs: ['n8n-icon', 'n8n-text'],
+				},
 				slots: {
 					default: '<n8n-text size="small">This is a warning callout.</n8n-text>',
 				},
@@ -44,7 +50,9 @@ describe('components', () => {
 				props: {
 					theme: 'danger',
 				},
+				global: {
 					stubs: ['n8n-icon', 'n8n-text'],
+				},
 				slots: {
 					default: '<n8n-text size="small">This is a danger callout.</n8n-text>',
 				},
@@ -56,7 +64,9 @@ describe('components', () => {
 				props: {
 					theme: 'secondary',
 				},
+				global: {
 					stubs: ['n8n-icon', 'n8n-text'],
+				},
 				slots: {
 					default: '<n8n-text size="small">This is a secondary callout.</n8n-text>',
 				},
@@ -69,7 +79,9 @@ describe('components', () => {
 					theme: 'custom',
 					icon: 'code-branch',
 				},
+				global: {
 					stubs: ['n8n-icon', 'n8n-text'],
+				},
 				slots: {
 					default: '<n8n-text size="small">This is a secondary callout.</n8n-text>',
 				},
@@ -82,7 +94,9 @@ describe('components', () => {
 					theme: 'custom',
 					icon: 'code-branch',
 				},
+				global: {
 					stubs: ['n8n-icon', 'n8n-text', 'n8n-link'],
+				},
 				slots: {
 					default: '<n8n-text size="small">This is a secondary callout.</n8n-text>',
 					actions: '<n8n-link size="small">Do something!</n8n-link>',

packages/design-system/src/components/N8nCallout/__tests__/__snapshots__/Callout.spec.ts.snap

@@ -3,16 +3,22 @@
 exports[`components > N8nCallout > should render additional slots correctly 1`] = `
 "<div class=\\"n8n-callout callout custom round\\" role=\\"alert\\">
   <div class=\\"messageSection\\">
-    <div class=\\"icon\\"><span class=\\"n8n-text compact size-medium regular n8n-icon n8n-icon\\"><!----></span></div><span class=\\"n8n-text size-small regular\\"><n8n-text size=\\"small\\">This is a secondary callout.</n8n-text></span> &nbsp; <n8n-link size=\\"small\\">Do something!</n8n-link>
+    <div class=\\"icon\\">
+      <n8n-icon-stub icon=\\"code-branch\\" size=\\"medium\\" spin=\\"false\\"></n8n-icon-stub>
     </div>
-  <n8n-link theme=\\"secondary\\" size=\\"small\\" bold=\\"true\\" underline=\\"true\\" to=\\"https://n8n.io\\">Learn more</n8n-link>
+    <n8n-text-stub bold=\\"false\\" size=\\"small\\" compact=\\"false\\" tag=\\"span\\"></n8n-text-stub> &nbsp; <n8n-link-stub size=\\"small\\"></n8n-link-stub>
+  </div>
+  <n8n-link-stub theme=\\"secondary\\" size=\\"small\\" bold=\\"true\\" underline=\\"true\\" to=\\"https://n8n.io\\"></n8n-link-stub>
 </div>"
 `;
 
 exports[`components > N8nCallout > should render custom theme correctly 1`] = `
 "<div class=\\"n8n-callout callout custom round\\" role=\\"alert\\">
   <div class=\\"messageSection\\">
-    <div class=\\"icon\\"><span class=\\"n8n-text compact size-medium regular n8n-icon n8n-icon\\"><!----></span></div><span class=\\"n8n-text size-small regular\\"><n8n-text size=\\"small\\">This is a secondary callout.</n8n-text></span> &nbsp;
+    <div class=\\"icon\\">
+      <n8n-icon-stub icon=\\"code-branch\\" size=\\"medium\\" spin=\\"false\\"></n8n-icon-stub>
+    </div>
+    <n8n-text-stub bold=\\"false\\" size=\\"small\\" compact=\\"false\\" tag=\\"span\\"></n8n-text-stub> &nbsp;
   </div>
 </div>"
 `;
@@ -20,7 +26,10 @@ exports[`components > N8nCallout > should render custom theme correctly 1`] = `
 exports[`components > N8nCallout > should render danger theme correctly 1`] = `
 "<div class=\\"n8n-callout callout danger round\\" role=\\"alert\\">
   <div class=\\"messageSection\\">
-    <div class=\\"icon\\"><span class=\\"n8n-text compact size-medium regular n8n-icon n8n-icon\\"><!----></span></div><span class=\\"n8n-text size-small regular\\"><n8n-text size=\\"small\\">This is a danger callout.</n8n-text></span> &nbsp;
+    <div class=\\"icon\\">
+      <n8n-icon-stub icon=\\"times-circle\\" size=\\"medium\\" spin=\\"false\\"></n8n-icon-stub>
+    </div>
+    <n8n-text-stub bold=\\"false\\" size=\\"small\\" compact=\\"false\\" tag=\\"span\\"></n8n-text-stub> &nbsp;
   </div>
 </div>"
 `;
@@ -28,7 +37,10 @@ exports[`components > N8nCallout > should render danger theme correctly 1`] = `
 exports[`components > N8nCallout > should render info theme correctly 1`] = `
 "<div class=\\"n8n-callout callout info round\\" role=\\"alert\\">
   <div class=\\"messageSection\\">
-    <div class=\\"icon\\"><span class=\\"n8n-text compact size-medium regular n8n-icon n8n-icon\\"><!----></span></div><span class=\\"n8n-text size-small regular\\"><n8n-text size=\\"small\\">This is an info callout.</n8n-text></span> &nbsp;
+    <div class=\\"icon\\">
+      <n8n-icon-stub icon=\\"info-circle\\" size=\\"medium\\" spin=\\"false\\"></n8n-icon-stub>
+    </div>
+    <n8n-text-stub bold=\\"false\\" size=\\"small\\" compact=\\"false\\" tag=\\"span\\"></n8n-text-stub> &nbsp;
   </div>
 </div>"
 `;
@@ -36,7 +48,10 @@ exports[`components > N8nCallout > should render info theme correctly 1`] = `
 exports[`components > N8nCallout > should render secondary theme correctly 1`] = `
 "<div class=\\"n8n-callout callout secondary round\\" role=\\"alert\\">
   <div class=\\"messageSection\\">
-    <div class=\\"icon\\"><span class=\\"n8n-text compact size-medium regular n8n-icon n8n-icon\\"><!----></span></div><span class=\\"n8n-text size-small regular\\"><n8n-text size=\\"small\\">This is a secondary callout.</n8n-text></span> &nbsp;
+    <div class=\\"icon\\">
+      <n8n-icon-stub icon=\\"info-circle\\" size=\\"medium\\" spin=\\"false\\"></n8n-icon-stub>
+    </div>
+    <n8n-text-stub bold=\\"false\\" size=\\"small\\" compact=\\"false\\" tag=\\"span\\"></n8n-text-stub> &nbsp;
   </div>
 </div>"
 `;
@@ -44,7 +59,10 @@ exports[`components > N8nCallout > should render secondary theme correctly 1`] =
 exports[`components > N8nCallout > should render success theme correctly 1`] = `
 "<div class=\\"n8n-callout callout success round\\" role=\\"alert\\">
   <div class=\\"messageSection\\">
-    <div class=\\"icon\\"><span class=\\"n8n-text compact size-medium regular n8n-icon n8n-icon\\"><!----></span></div><span class=\\"n8n-text size-small regular\\"><n8n-text size=\\"small\\">This is a success callout.</n8n-text></span> &nbsp;
+    <div class=\\"icon\\">
+      <n8n-icon-stub icon=\\"check-circle\\" size=\\"medium\\" spin=\\"false\\"></n8n-icon-stub>
+    </div>
+    <n8n-text-stub bold=\\"false\\" size=\\"small\\" compact=\\"false\\" tag=\\"span\\"></n8n-text-stub> &nbsp;
   </div>
 </div>"
 `;
@@ -52,7 +70,10 @@ exports[`components > N8nCallout > should render success theme correctly 1`] = `
 exports[`components > N8nCallout > should render warning theme correctly 1`] = `
 "<div class=\\"n8n-callout callout warning round\\" role=\\"alert\\">
   <div class=\\"messageSection\\">
-    <div class=\\"icon\\"><span class=\\"n8n-text compact size-medium regular n8n-icon n8n-icon\\"><!----></span></div><span class=\\"n8n-text size-small regular\\"><n8n-text size=\\"small\\">This is a warning callout.</n8n-text></span> &nbsp;
+    <div class=\\"icon\\">
+      <n8n-icon-stub icon=\\"exclamation-triangle\\" size=\\"medium\\" spin=\\"false\\"></n8n-icon-stub>
+    </div>
+    <n8n-text-stub bold=\\"false\\" size=\\"small\\" compact=\\"false\\" tag=\\"span\\"></n8n-text-stub> &nbsp;
   </div>
 </div>"
 `;

packages/design-system/src/components/N8nColorPicker/ColorPicker.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import { computed, ref } from 'vue';
+import { uid } from '@/utils';
 import { ElColorPicker } from 'element-plus';
 import N8nInput from '../N8nInput';
 
@@ -12,6 +13,7 @@ export type Props = {
 	predefine?: string[];
 	modelValue?: string;
 	showInput?: boolean;
+	name?: string;
 };
 
 const props = withDefaults(defineProps<Props>(), {
@@ -22,6 +24,7 @@ const props = withDefaults(defineProps<Props>(), {
 	popperClass: '',
 	showInput: true,
 	modelValue: null,
+	name: uid('color-picker'),
 });
 
 const color = ref(props.modelValue);
@@ -73,6 +76,7 @@ const onActiveChange = (value: string) => {
 			:disabled="props.disabled"
 			:size="props.size"
 			:modelValue="color"
+			:name="name"
 			@update:modelValue="onInput"
 			type="text"
 		/>

packages/design-system/src/components/N8nColorPicker/__tests__/ColorPicker.spec.ts

@@ -4,12 +4,21 @@ import N8nColorPicker from '../ColorPicker.vue';
 describe('components', () => {
 	describe('N8nColorPicker', () => {
 		it('should render with input', () => {
-			const { container } = render(N8nColorPicker);
+			const { container } = render(N8nColorPicker, {
+				props: {
+					name: 'color-picker',
+				},
+			});
 			expect(container).toMatchSnapshot();
 		});
 
 		it('should render without input', () => {
-			const { container } = render(N8nColorPicker, { props: { showInput: false } });
+			const { container } = render(N8nColorPicker, {
+				props: {
+					name: 'color-picker',
+					showInput: false,
+				},
+			});
 			expect(container).toMatchSnapshot();
 		});
 	});

packages/design-system/src/components/N8nColorPicker/__tests__/__snapshots__/ColorPicker.spec.ts.snap

@@ -80,7 +80,7 @@ exports[`components > N8nColorPicker > should render with input 1`] = `
           autocomplete="off"
           class="el-input__inner"
           maxlength="Infinity"
-          name="input-d2u88i4v0"
+          name="color-picker"
           placeholder=""
           rows="2"
           tabindex="0"

packages/design-system/src/components/N8nDatatable/__tests__/Datatable.spec.ts

@@ -10,12 +10,14 @@ describe('components', () => {
 
 		it('should render correctly', () => {
 			const wrapper = render(N8nDatatable, {
-				propsData: {
+				props: {
 					columns,
 					rows,
 					rowsPerPage,
 				},
+				global: {
 					stubs,
+				},
 			});
 
 			expect(wrapper.container.querySelectorAll('thead tr').length).toEqual(1);
@@ -28,12 +30,14 @@ describe('components', () => {
 
 		it('should add column classes', () => {
 			const wrapper = render(N8nDatatable, {
-				propsData: {
+				props: {
 					columns: columns.map((column) => ({ ...column, classes: ['example'] })),
 					rows,
 					rowsPerPage,
 				},
+				global: {
 					stubs,
+				},
 			});
 
 			expect(wrapper.container.querySelectorAll('.example').length).toEqual(
@@ -43,14 +47,16 @@ describe('components', () => {
 
 		it('should render row slot', () => {
 			const wrapper = render(N8nDatatable, {
-				propsData: {
+				props: {
 					columns,
 					rows,
 					rowsPerPage,
 				},
+				global: {
 					stubs,
-				scopedSlots: {
+				},
-					row: '<main><td v-for="column in props.columns" :key="column.id">Row slot</td></main>', // Wrapper is necessary for looping
+				slots: {
+					row: '<template #row="props"><td v-for="column in props.columns" :key="column.id">Row slot</td></template>', // Wrapper is necessary for looping
 				},
 			});
 

packages/design-system/src/components/N8nDatatable/__tests__/__snapshots__/Datatable.spec.ts.snap

@@ -95,41 +95,9 @@ exports[`components > N8nDatatable > should render correctly 1`] = `
     </tbody>
   </table>
   <div class=\\"pagination\\">
-    <div class=\\"el-pagination is-background is-background\\"><button type=\\"button\\" class=\\"btn-prev is-first\\" disabled=\\"\\" aria-label=\\"Go to previous page\\" aria-disabled=\\"true\\"><i class=\\"el-icon\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 1024 1024\\">
+    <n8n-pagination-stub pagesize=\\"10\\" total=\\"15\\" currentpage=\\"1\\" pagercount=\\"5\\" layout=\\"prev, pager, next\\" pagesizes=\\"10,20,30,40,50,100\\" popperclass=\\"\\" prevtext=\\"\\" previcon=\\"[object Object]\\" nexttext=\\"\\" nexticon=\\"[object Object]\\" small=\\"false\\" background=\\"true\\" disabled=\\"false\\" hideonsinglepage=\\"false\\"></n8n-pagination-stub>
-            <path fill=\\"currentColor\\" d=\\"M609.408 149.376 277.76 489.6a32 32 0 0 0 0 44.672l331.648 340.352a29.12 29.12 0 0 0 41.728 0 30.592 30.592 0 0 0 0-42.752L339.264 511.936l311.872-319.872a30.592 30.592 0 0 0 0-42.688 29.12 29.12 0 0 0-41.728 0z\\"></path>
-          </svg></i></button>
-      <ul class=\\"el-pager\\">
-        <li class=\\"is-active number\\" aria-current=\\"true\\" aria-label=\\"page 1\\" tabindex=\\"0\\"> 1 </li>
-        <!--v-if-->
-        <!--v-if-->
-        <li class=\\"number\\" aria-current=\\"false\\" aria-label=\\"page 2\\" tabindex=\\"0\\">2</li>
-      </ul><button type=\\"button\\" class=\\"btn-next is-last\\" aria-label=\\"Go to next page\\" aria-disabled=\\"false\\"><i class=\\"el-icon\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 1024 1024\\">
-            <path fill=\\"currentColor\\" d=\\"M340.864 149.312a30.592 30.592 0 0 0 0 42.752L652.736 512 340.864 831.872a30.592 30.592 0 0 0 0 42.752 29.12 29.12 0 0 0 41.728 0L714.24 534.336a32 32 0 0 0 0-44.672L382.592 149.376a29.12 29.12 0 0 0-41.728 0z\\"></path>
-          </svg></i></button>
-    </div>
     <div class=\\"pageSizeSelector\\">
-      <div class=\\"n8n-select container withPrepend\\">
+      <n8n-select-stub modelvalue=\\"10\\" autocomplete=\\"off\\" automaticdropdown=\\"false\\" size=\\"mini\\" effect=\\"light\\" disabled=\\"false\\" clearable=\\"false\\" filterable=\\"false\\" allowcreate=\\"false\\" loading=\\"false\\" popperoptions=\\"[object Object]\\" remote=\\"false\\" multiple=\\"false\\" multiplelimit=\\"0\\" defaultfirstoption=\\"false\\" reservekeyword=\\"true\\" valuekey=\\"value\\" collapsetags=\\"false\\" collapsetagstooltip=\\"false\\" maxcollapsetags=\\"1\\" teleported=\\"true\\" persistent=\\"true\\" clearicon=\\"[object Object]\\" fitinputwidth=\\"false\\" suffixicon=\\"[object Object]\\" tagtype=\\"info\\" validateevent=\\"true\\" remoteshowsuffix=\\"false\\" suffixtransition=\\"true\\" placement=\\"bottom-start\\" popperappendtobody=\\"false\\" limitpopperwidth=\\"false\\"></n8n-select-stub>
-        <div class=\\"prepend\\">Page size</div>
-        <div class=\\"el-select el-select--mini\\" popperappendtobody=\\"false\\" limitpopperwidth=\\"false\\">
-          <div class=\\"select-trigger el-tooltip__trigger el-tooltip__trigger\\">
-            <!--v-if-->
-            <!-- fix: https://github.com/element-plus/element-plus/issues/11415 -->
-            <!--v-if-->
-            <div class=\\"el-input el-input--mini el-input--suffix\\">
-              <!-- input -->
-              <!-- prepend slot -->
-              <!--v-if-->
-              <div class=\\"el-input__wrapper\\">
-                <!-- prefix slot -->
-                <!--v-if--><input class=\\"el-input__inner\\" type=\\"text\\" readonly=\\"\\" autocomplete=\\"off\\" tabindex=\\"0\\" placeholder=\\"Select\\"><!-- suffix slot --><span class=\\"el-input__suffix\\"><span class=\\"el-input__suffix-inner\\"><i class=\\"el-icon el-select__caret el-select__icon\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 1024 1024\\"><path fill=\\"currentColor\\" d=\\"M831.872 340.864 512 652.672 192.128 340.864a30.592 30.592 0 0 0-42.752 0 29.12 29.12 0 0 0 0 41.6L489.664 714.24a32 32 0 0 0 44.672 0l340.288-331.712a29.12 29.12 0 0 0 0-41.728 30.592 30.592 0 0 0-42.752 0z\\"></path></svg></i><!--v-if--><!--v-if--><!--v-if--><!--v-if--><!--v-if--><!--v-if--></span></span>
-              </div><!-- append slot -->
-              <!--v-if-->
-            </div>
-          </div>
-          <!--teleport start-->
-          <!--teleport end-->
-        </div>
-      </div>
     </div>
   </div>
 </div>"

packages/design-system/src/components/N8nInfoTip/__tests__/InfoTip.spec.ts

@@ -10,7 +10,9 @@ describe('N8nInfoTip', () => {
 	it('should render correctly as note', () => {
 		const wrapper = render(N8nInfoTip, {
 			slots,
+			global: {
 				stubs,
+			},
 		});
 		expect(wrapper.html()).toMatchSnapshot();
 	});
@@ -18,10 +20,12 @@ describe('N8nInfoTip', () => {
 	it('should render correctly as tooltip', () => {
 		const wrapper = render(N8nInfoTip, {
 			slots,
-			stubs,
 			props: {
 				type: 'tooltip',
 			},
+			global: {
+				stubs,
+			},
 		});
 		expect(wrapper.html()).toMatchSnapshot();
 	});

packages/design-system/src/components/N8nInfoTip/__tests__/__snapshots__/InfoTip.spec.ts.snap

@@ -3,8 +3,7 @@
 exports[`N8nInfoTip > should render correctly as note 1`] = `"<div class=\\"n8n-info-tip info note bold\\"><span class=\\"iconText\\"><span class=\\"n8n-text compact size-medium regular n8n-icon n8n-icon\\"><!----></span><span>Need help doing something?<a href=\\"/docs\\" target=\\"_blank\\">Open docs</a></span></span></div>"`;
 
 exports[`N8nInfoTip > should render correctly as tooltip 1`] = `
-"<div class=\\"n8n-info-tip info tooltip bold\\"><span class=\\"iconText el-tooltip__trigger el-tooltip__trigger\\"><span class=\\"n8n-text compact size-medium regular n8n-icon n8n-icon\\"><!----></span></span>
+"<div class=\\"n8n-info-tip info tooltip bold\\">
-  <!--teleport start-->
+  <n8n-tooltip-stub popperclass=\\"tooltipPopper\\" role=\\"tooltip\\" showafter=\\"0\\" hideafter=\\"200\\" autoclose=\\"0\\" boundariespadding=\\"0\\" gpuacceleration=\\"true\\" offset=\\"12\\" placement=\\"top\\" popperoptions=\\"[object Object]\\" strategy=\\"absolute\\" effect=\\"dark\\" enterable=\\"true\\" pure=\\"false\\" focusonshow=\\"false\\" trapping=\\"false\\" stoppoppermouseevent=\\"true\\" virtualtriggering=\\"false\\" content=\\"\\" rawcontent=\\"false\\" persistent=\\"false\\" teleported=\\"true\\" disabled=\\"false\\" open=\\"false\\" trigger=\\"hover\\" triggerkeys=\\"Enter,Space\\" arrowoffset=\\"5\\" showarrow=\\"true\\" justifybuttons=\\"flex-end\\" buttons=\\"\\" class=\\"\\"></n8n-tooltip-stub>
-  <!--teleport end-->
 </div>"
 `;

packages/design-system/src/components/N8nInput/__tests__/Input.spec.ts

@@ -3,7 +3,11 @@ import N8nInput from '../Input.vue';
 
 describe('N8nInput', () => {
 	it('should render correctly', () => {
-		const wrapper = render(N8nInput);
+		const wrapper = render(N8nInput, {
+			props: {
+				name: 'input',
+			},
+		});
 		expect(wrapper.html()).toMatchSnapshot();
 	});
 });

packages/design-system/src/components/N8nInput/__tests__/__snapshots__/Input.spec.ts.snap

@@ -7,7 +7,7 @@ exports[`N8nInput > should render correctly 1`] = `
   <!--v-if-->
   <div class=\\"el-input__wrapper\\">
     <!-- prefix slot -->
-    <!--v-if--><input class=\\"el-input__inner\\" autocomplete=\\"off\\" name=\\"input-uh4hw333g\\" rows=\\"2\\" maxlength=\\"Infinity\\" title=\\"\\" type=\\"text\\" tabindex=\\"0\\" placeholder=\\"\\"><!-- suffix slot -->
+    <!--v-if--><input class=\\"el-input__inner\\" autocomplete=\\"off\\" name=\\"input\\" rows=\\"2\\" maxlength=\\"Infinity\\" title=\\"\\" type=\\"text\\" tabindex=\\"0\\" placeholder=\\"\\"><!-- suffix slot -->
     <!--v-if-->
   </div><!-- append slot -->
   <!--v-if-->

packages/design-system/src/components/N8nNotice/__tests__/Notice.spec.ts

@@ -1,5 +1,6 @@
 import { render } from '@testing-library/vue';
 import N8nNotice from '../Notice.vue';
+import { N8nText } from '@/components';
 
 describe('components', () => {
 	describe('N8nNotice', () => {
@@ -11,7 +12,9 @@ describe('components', () => {
 				slots: {
 					default: 'This is a notice.',
 				},
+				global: {
 					stubs: ['n8n-text'],
+				},
 			});
 			expect(wrapper.html()).toMatchSnapshot();
 		});
@@ -24,7 +27,9 @@ describe('components', () => {
 							id: 'notice',
 							content: 'This is a notice.',
 						},
+						global: {
 							stubs: ['n8n-text'],
+						},
 					});
 					expect(wrapper.html()).toMatchSnapshot();
 				});
@@ -35,7 +40,11 @@ describe('components', () => {
 							id: 'notice',
 							content: '<strong>Hello world!</strong> This is a notice.',
 						},
-						stubs: ['n8n-text'],
+						global: {
+							components: {
+								'n8n-text': N8nText,
+							},
+						},
 					});
 
 					expect(wrapper.container.querySelectorAll('strong')).toHaveLength(1);
@@ -48,7 +57,9 @@ describe('components', () => {
 							id: 'notice',
 							content: '<script>alert(1);</script> This is a notice.',
 						},
+						global: {
 							stubs: ['n8n-text'],
+						},
 					});
 
 					expect(wrapper.container.querySelector('script')).not.toBeTruthy();

packages/design-system/src/components/N8nNotice/__tests__/__snapshots__/Notice.spec.ts.snap

@@ -8,18 +8,24 @@ exports[`components > N8nNotice > props > content > should render HTML 1`] = `
 
 exports[`components > N8nNotice > props > content > should render correctly with content prop 1`] = `
 "<div id=\\"notice\\" class=\\"notice notice warning\\" role=\\"alert\\">
-  <div class=\\"notice-content\\"><span class=\\"n8n-text compact size-small regular\\"><span class=\\"truncated\\" id=\\"notice-content\\" role=\\"region\\">This is a notice.</span></span></div>
+  <div class=\\"notice-content\\">
+    <n8n-text-stub bold=\\"false\\" size=\\"small\\" compact=\\"true\\" tag=\\"span\\"></n8n-text-stub>
+  </div>
 </div>"
 `;
 
 exports[`components > N8nNotice > props > content > should sanitize rendered HTML 1`] = `
 "<div id=\\"notice\\" class=\\"notice notice warning\\" role=\\"alert\\">
-  <div class=\\"notice-content\\"><span class=\\"n8n-text compact size-small regular\\"><span class=\\"truncated\\" id=\\"notice-content\\" role=\\"region\\"> This is a notice.</span></span></div>
+  <div class=\\"notice-content\\">
+    <n8n-text-stub bold=\\"false\\" size=\\"small\\" compact=\\"true\\" tag=\\"span\\"></n8n-text-stub>
+  </div>
 </div>"
 `;
 
 exports[`components > N8nNotice > should render correctly 1`] = `
 "<div id=\\"notice\\" class=\\"notice notice warning\\" role=\\"alert\\">
-  <div class=\\"notice-content\\"><span class=\\"n8n-text compact size-small regular\\">This is a notice.</span></div>
+  <div class=\\"notice-content\\">
+    <n8n-text-stub bold=\\"false\\" size=\\"small\\" compact=\\"true\\" tag=\\"span\\"></n8n-text-stub>
+  </div>
 </div>"
 `;

packages/design-system/src/components/N8nRecycleScroller/__tests__/RecycleScroller.spec.ts

@@ -12,7 +12,7 @@ describe('components', () => {
 	describe('N8nRecycleScroller', () => {
 		it('should render correctly', () => {
 			const wrapper = render(N8nRecycleScroller, {
-				propsData: {
+				props: {
 					itemSize,
 					itemKey,
 					items,

packages/design-system/src/components/N8nSelect/__tests__/Select.spec.ts

@@ -8,8 +8,10 @@ describe('components', () => {
 	describe('N8nSelect', () => {
 		it('should render correctly', () => {
 			const wrapper = render(N8nSelect, {
+				global: {
 					components: {
-					N8nOption,
+						'n8n-option': N8nOption,
+					},
 				},
 				slots: {
 					default: [
@@ -24,10 +26,6 @@ describe('components', () => {
 
 		it('should select an option', async () => {
 			const n8nSelectTestComponent = defineComponent({
-				components: {
-					N8nSelect,
-					N8nOption,
-				},
 				template: `
 					<n8n-select v-model="selected">
 						<n8n-option v-for="o in options" :key="o" :value="o" :label="o" />
@@ -44,10 +42,20 @@ describe('components', () => {
 				},
 			});
 
-			const { container, getByRole } = render(n8nSelectTestComponent);
+			const { container } = render(n8nSelectTestComponent, {
+				props: {
+					teleported: false,
+				},
+				global: {
+					components: {
+						'n8n-select': N8nSelect,
+						'n8n-option': N8nOption,
+					},
+				},
+			});
 			const getOption = (value: string) => within(container as HTMLElement).getByText(value);
-			const textbox = getByRole('textbox');
 
+			const textbox = container.querySelector('input')!;
 			await userEvent.click(textbox);
 			await waitFor(() => expect(getOption('1')).toBeVisible());
 			await userEvent.click(getOption('1'));

packages/design-system/src/components/N8nSelect/__tests__/__snapshots__/Select.spec.ts.snap

@@ -3,10 +3,24 @@
 exports[`components > N8nSelect > should render correctly 1`] = `
 "<div class=\\"n8n-select container\\">
   <!--v-if-->
-  <el-select autocomplete=\\"off\\" automaticdropdown=\\"false\\" size=\\"large\\" effect=\\"light\\" disabled=\\"false\\" clearable=\\"false\\" filterable=\\"false\\" allowcreate=\\"false\\" loading=\\"false\\" popperoptions=\\"[object Object]\\" remote=\\"false\\" multiple=\\"false\\" multiplelimit=\\"0\\" defaultfirstoption=\\"false\\" reservekeyword=\\"true\\" valuekey=\\"value\\" collapsetags=\\"false\\" collapsetagstooltip=\\"false\\" maxcollapsetags=\\"1\\" teleported=\\"true\\" persistent=\\"true\\" clearicon=\\"[object Object]\\" fitinputwidth=\\"false\\" suffixicon=\\"[object Object]\\" tagtype=\\"info\\" validateevent=\\"true\\" remoteshowsuffix=\\"false\\" suffixtransition=\\"true\\" placement=\\"bottom-start\\" popperappendtobody=\\"false\\" limitpopperwidth=\\"false\\" class=\\"\\">
+  <div class=\\"el-select el-select--large\\" popperappendtobody=\\"false\\" limitpopperwidth=\\"false\\">
-    <n8n-option value=\\"1\\">1</n8n-option>
+    <div class=\\"select-trigger el-tooltip__trigger el-tooltip__trigger\\">
-    <n8n-option value=\\"2\\">2</n8n-option>
+      <!--v-if-->
-    <n8n-option value=\\"3\\">3</n8n-option>
+      <!-- fix: https://github.com/element-plus/element-plus/issues/11415 -->
-  </el-select>
+      <!--v-if-->
+      <div class=\\"el-input el-input--large el-input--suffix\\">
+        <!-- input -->
+        <!-- prepend slot -->
+        <!--v-if-->
+        <div class=\\"el-input__wrapper\\">
+          <!-- prefix slot -->
+          <!--v-if--><input class=\\"el-input__inner\\" type=\\"text\\" readonly=\\"\\" autocomplete=\\"off\\" tabindex=\\"0\\" placeholder=\\"Select\\"><!-- suffix slot --><span class=\\"el-input__suffix\\"><span class=\\"el-input__suffix-inner\\"><i class=\\"el-icon el-select__caret el-select__icon\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 1024 1024\\"><path fill=\\"currentColor\\" d=\\"M831.872 340.864 512 652.672 192.128 340.864a30.592 30.592 0 0 0-42.752 0 29.12 29.12 0 0 0 0 41.6L489.664 714.24a32 32 0 0 0 44.672 0l340.288-331.712a29.12 29.12 0 0 0 0-41.728 30.592 30.592 0 0 0-42.752 0z\\"></path></svg></i><!--v-if--><!--v-if--><!--v-if--><!--v-if--><!--v-if--><!--v-if--></span></span>
+        </div><!-- append slot -->
+        <!--v-if-->
+      </div>
+    </div>
+    <!--teleport start-->
+    <!--teleport end-->
+  </div>
 </div>"
 `;

packages/design-system/src/components/index.ts

@@ -6,7 +6,6 @@ export { default as N8nAvatar } from './N8nAvatar';
 export { default as N8nBadge } from './N8nBadge';
 export { default as N8nBlockUi } from './N8nBlockUi';
 export { default as N8nButton } from './N8nButton';
-export { N8nElButton } from './N8nButton/overrides';
 export { default as N8nCallout } from './N8nCallout';
 export { default as N8nCard } from './N8nCard';
 export { default as N8nCheckbox } from './N8nCheckbox';

packages/design-system/src/plugin.ts

@@ -9,7 +9,6 @@ import {
 	N8nBadge,
 	N8nBlockUi,
 	N8nButton,
-	N8nElButton,
 	N8nCallout,
 	N8nCard,
 	N8nCheckbox,
@@ -64,7 +63,6 @@ export const N8nPlugin: Plugin<{}> = {
 		app.component('n8n-badge', N8nBadge);
 		app.component('n8n-block-ui', N8nBlockUi);
 		app.component('n8n-button', N8nButton);
-		app.component('el-button', N8nElButton);
 		app.component('n8n-callout', N8nCallout);
 		app.component('n8n-card', N8nCard);
 		app.component('n8n-checkbox', N8nCheckbox);