From 8d2981bf6c5d8a1f1160ca7233667adbac523908 Mon Sep 17 00:00:00 2001
From: Nicolas Merget <nicolas.merget@deutschebahn.com>
Date: Tue, 14 Jan 2025 17:25:11 +0100
Subject: [PATCH 01/10] chore: replace mitosis generated vue output
 (options-api) with composition-api

---
 output/vue/package.json                       |  9 ++-
 output/vue/scripts/fix-any-types.ts           | 57 -------------------
 .../mitosis/new/component/tsx.ejs.t           |  6 +-
 packages/components/configs/vue/index.js      |  3 +-
 packages/components/scripts/post-build/vue.ts | 31 ++--------
 .../accordion-item/accordion-item.lite.tsx    |  7 ++-
 .../accordion-item/accordion-item.scss        |  2 +-
 .../components/accordion/accordion.lite.tsx   | 19 ++++---
 .../src/components/badge/badge.lite.tsx       | 13 +++--
 .../src/components/brand/brand.lite.tsx       | 14 ++++-
 .../src/components/button/button.lite.tsx     | 14 ++++-
 .../src/components/card/card.lite.tsx         | 13 ++++-
 .../src/components/checkbox/checkbox.lite.tsx | 17 +++---
 .../src/components/checkbox/docs/Vue.md       |  4 +-
 .../src/components/divider/divider.lite.tsx   | 13 ++++-
 .../src/components/drawer/docs/Vue.md         |  4 +-
 .../src/components/drawer/drawer.lite.tsx     | 25 ++++----
 .../src/components/drawer/drawer.scss         |  4 +-
 .../src/components/header/docs/Vue.md         |  4 +-
 .../src/components/header/header.lite.tsx     |  7 ++-
 .../src/components/icon/icon.lite.tsx         | 14 ++++-
 .../src/components/infotext/infotext.lite.tsx | 14 ++++-
 .../src/components/input/input.lite.tsx       | 17 +++---
 .../src/components/input/input.scss           |  2 +-
 .../src/components/link/link.lite.tsx         | 20 ++++---
 .../navigation-item/navigation-item.lite.tsx  |  9 ++-
 .../navigation-item/navigation-item.scss      |  4 +-
 .../navigation/docs/Accessibility.md          |  2 +-
 .../components/navigation/navigation.lite.tsx | 14 ++++-
 .../src/components/navigation/navigation.scss |  2 +-
 .../notification/notification.lite.tsx        | 15 ++++-
 .../src/components/page/page.lite.tsx         |  6 +-
 .../components/src/components/page/page.scss  |  2 +-
 .../src/components/popover/popover.lite.tsx   | 22 +++----
 .../src/components/radio/docs/Vue.md          |  4 +-
 .../src/components/radio/radio.lite.tsx       |  6 +-
 .../src/components/radio/radio.scss           |  2 +-
 .../src/components/section/section.lite.tsx   | 13 ++++-
 .../src/components/select/select.lite.tsx     | 16 +++---
 .../src/components/stack/stack.lite.tsx       | 14 +++--
 .../src/components/switch/switch.lite.tsx     |  8 ++-
 .../src/components/switch/switch.scss         |  4 +-
 .../src/components/tab-item/tab-item.lite.tsx | 12 ++--
 .../src/components/tab-list/tab-list.lite.tsx | 13 ++++-
 .../components/tab-panel/tab-panel.lite.tsx   |  6 +-
 .../components/src/components/tabs/index.html | 20 +++----
 .../src/components/tabs/tabs.lite.tsx         | 48 +++++++++-------
 .../src/components/tag/tag.lite.tsx           | 14 +++--
 .../src/components/textarea/docs/Vue.md       |  6 +-
 .../src/components/textarea/textarea.lite.tsx | 16 +++---
 .../src/components/tooltip/tooltip.lite.tsx   | 16 +++---
 .../components/src/utils/form-components.ts   |  2 +-
 packages/components/src/utils/navigation.ts   | 29 +++++++---
 .../src/components/DefaultComponent.vue       |  6 +-
 54 files changed, 370 insertions(+), 294 deletions(-)
 delete mode 100644 output/vue/scripts/fix-any-types.ts

diff --git a/output/vue/package.json b/output/vue/package.json
index 670089f1e71..1c8a24109e7 100644
--- a/output/vue/package.json
+++ b/output/vue/package.json
@@ -13,12 +13,12 @@
   "exports": {
     ".": {
       "import": {
-        "default": "./dist/db-ui.es.js",
-        "types": "./dist/index.d.ts"
+        "types": "./dist/index.d.ts",
+        "default": "./dist/db-ui.es.js"
       },
       "require": {
-        "default": "./dist/db-ui.umd.js",
-        "types": "./dist/index.d.ts"
+        "types": "./dist/index.d.ts",
+        "default": "./dist/db-ui.umd.js"
       }
     }
   },
@@ -30,7 +30,6 @@
     "build": "npm-run-all build:*",
     "build:01_vite": "vite build",
     "build:02_types": "vue-tsc --declaration --emitDeclarationOnly",
-    "build:03_ts_workaround": "tsx scripts/fix-any-types.ts",
     "mv:dist": "cpr dist ../../build-outputs/vue/dist -o",
     "mv:package.json": "cpr package.json ../../build-outputs/vue/package.json -o",
     "mv:readme": "cpr README.md ../../build-outputs/vue/README.md -o",
diff --git a/output/vue/scripts/fix-any-types.ts b/output/vue/scripts/fix-any-types.ts
deleted file mode 100644
index 65b1ff44a7c..00000000000
--- a/output/vue/scripts/fix-any-types.ts
+++ /dev/null
@@ -1,57 +0,0 @@
-import { readdirSync } from 'node:fs';
-import { replaceInFileSync } from 'replace-in-file';
-
-const distDir = './dist/components';
-
-const transformToUpperComponentName = (componentName: string) =>
-	componentName
-		.split('-')
-		.map((part) => `${part[0].toUpperCase()}${part.slice(1)}`)
-		.join('');
-
-/**
- * Props are generated like this: `readonly id?: any;`
- * We replace it with the correct type like DBMyComponent["id"]
- */
-const replaceAnyTypes = (input: string, component: string) => {
-	const propModel = `DB${transformToUpperComponentName(component)}Props`;
-	let fileContent = input;
-
-	const readOnlyLines = fileContent.match(/Readonly<{[\s\S]*?}>/g);
-	for (const roLine of readOnlyLines) {
-		const propLines = roLine.match(/(.*);/g);
-		if (propLines) {
-			propLines.forEach((propLine) => {
-				// Check if prop(contains ": any") or function
-				if (propLine.includes(': any;')) {
-					const prop = propLine
-						.replace('?: any;', '')
-						.replace(': any;', '')
-						.trim();
-					// @ts-ignore
-					fileContent = fileContent.replaceAll(
-						propLine,
-						propLine.replace('any', `${propModel}["${prop}"]`)
-					);
-				}
-			});
-		}
-	}
-
-	return `import { ${propModel} } from "./model";\n\n${fileContent}`;
-};
-
-const fixAnyTypes = () => {
-	const components: string[] = readdirSync(distDir);
-
-	for (const component of components) {
-		replaceInFileSync({
-			files: `${distDir}/${component}/${component}.vue.d.ts`,
-			processor(input: string) {
-				return replaceAnyTypes(input, component);
-			}
-		});
-	}
-};
-
-fixAnyTypes();
diff --git a/packages/components/_templates/mitosis/new/component/tsx.ejs.t b/packages/components/_templates/mitosis/new/component/tsx.ejs.t
index 61ed4db0691..c2faf8a2ebe 100644
--- a/packages/components/_templates/mitosis/new/component/tsx.ejs.t
+++ b/packages/components/_templates/mitosis/new/component/tsx.ejs.t
@@ -1,7 +1,7 @@
 ---
 to: src/components/<%= name %>/<%= name %>.lite.tsx
 ---
-import { Show, useMetadata, useStore, useRef } from "@builder.io/mitosis";
+import { Show, useMetadata, useStore, useRef, useDefaultProps } from "@builder.io/mitosis";
 import { DB<%= h.changeCase.pascal(name) %>State, DB<%= h.changeCase.pascal(name) %>Props } from "./model";
 import { cls } from "../../utils";
 <% if(formValue!=="no"){   -%>
@@ -11,9 +11,11 @@ import { handleFrameworkEvent } from "../../utils/form-components";
 
 useMetadata({});
 
+useDefaultProps< DB<%= h.changeCase.pascal(name) %>Props>({});
+
 export default function DB<%= h.changeCase.pascal(name) %>(props: DB<%= h.changeCase.pascal(name) %>Props) {
   // This is used as forwardRef
-  const ref = useRef<HTMLDivElement>(null);
+  const _ref = useRef<HTMLDivElement | null>(null);
   // jscpd:ignore-start
   const state = useStore<DB<%= h.changeCase.pascal(name) %>State>({
       <% if(formValue!=="no"){   -%>
diff --git a/packages/components/configs/vue/index.js b/packages/components/configs/vue/index.js
index fcf5f165fc6..76acfa02a2b 100644
--- a/packages/components/configs/vue/index.js
+++ b/packages/components/configs/vue/index.js
@@ -1,3 +1,4 @@
 module.exports = {
-	typescript: true
+	typescript: true,
+	api: 'composition'
 };
diff --git a/packages/components/scripts/post-build/vue.ts b/packages/components/scripts/post-build/vue.ts
index 1763c55b470..cd75f213e24 100644
--- a/packages/components/scripts/post-build/vue.ts
+++ b/packages/components/scripts/post-build/vue.ts
@@ -2,7 +2,7 @@ import { replaceInFileSync } from 'replace-in-file';
 
 import components, { Overwrite } from './components.js';
 
-import { runReplacements, transformToUpperComponentName } from '../utils';
+import { runReplacements } from '../utils';
 
 export default (tmp?: boolean) => {
 	const outputFolder = `${tmp ? 'output/tmp' : 'output'}`;
@@ -38,40 +38,19 @@ export default (tmp?: boolean) => {
 
 			const replacements: Overwrite[] = [
 				{
-					from: /immediate: true,/g,
+					from: /immediate: true/g,
 					to: 'immediate: true,\nflush: "post"'
-				},
-				/* `this` can be undefined for ssr (nuxt) we need to add */
-				{
-					from: /this.\$refs.ref\?.validationMessage/g,
-					to: '(this as any)?.$refs.ref?.validationMessage'
 				}
 			];
 
-			/* This is a workaround for valid/invalid Messages.
-			 *  If a valid/invalid message appears it will use the old this._value,
-			 *  so we need to overwrite this._value with the current event.target.value.   */
-			[
-				'HTMLSelectElement',
-				'HTMLInputElement',
-				'HTMLTextAreaElement'
-			].forEach((element) => {
-				replacements.push({
-					from: `handleInput(event: InputEvent<${element}>) {`,
-					to:
-						`handleInput(event: InputEvent<${element}>) {\n` +
-						'this._value = (event.target as any).value;'
-				});
-			});
-
 			if (component?.config?.vue?.vModel) {
 				replacements.push({
-					from: 'props: [',
-					to: `emits: ${JSON.stringify(
+					from: 'const props =',
+					to: `const emit = defineEmits(${JSON.stringify(
 						component?.config?.vue?.vModel.map(
 							(bin) => `update:${bin.modelValue}`
 						)
-					)},\nprops: [`
+					)})\n\nconst props =`
 				});
 			}
 
diff --git a/packages/components/src/components/accordion-item/accordion-item.lite.tsx b/packages/components/src/components/accordion-item/accordion-item.lite.tsx
index a57d527b1e0..eef1b106fe2 100644
--- a/packages/components/src/components/accordion-item/accordion-item.lite.tsx
+++ b/packages/components/src/components/accordion-item/accordion-item.lite.tsx
@@ -2,6 +2,7 @@ import {
 	onMount,
 	Show,
 	Slot,
+	useDefaultProps,
 	useMetadata,
 	useRef,
 	useStore
@@ -13,8 +14,10 @@ import { DEFAULT_ID } from '../../shared/constants';
 
 useMetadata({});
 
+useDefaultProps<DBAccordionItemProps>({});
+
 export default function DBAccordionItem(props: DBAccordionItemProps) {
-	const ref = useRef<HTMLDetailsElement>(null);
+	const _ref = useRef<HTMLDetailsElement | null>(null);
 	// jscpd:ignore-start
 	const state = useStore<DBAccordionItemState>({
 		_id: DEFAULT_ID,
@@ -42,7 +45,7 @@ export default function DBAccordionItem(props: DBAccordionItemProps) {
 		<li id={state._id} class={cls('db-accordion-item', props.className)}>
 			<details
 				aria-disabled={getBooleanAsString(props.disabled)}
-				ref={ref}
+				ref={_ref}
 				open={state._open}>
 				<summary onClick={(event) => state.toggle(event)}>
 					<Show when={props.headlinePlain}>
diff --git a/packages/components/src/components/accordion-item/accordion-item.scss b/packages/components/src/components/accordion-item/accordion-item.scss
index 5e8e18f0087..0cdab82a93d 100644
--- a/packages/components/src/components/accordion-item/accordion-item.scss
+++ b/packages/components/src/components/accordion-item/accordion-item.scss
@@ -16,7 +16,7 @@ $db-accordion-item-border-radius: variables.$db-border-radius-sm;
 	> details {
 		&[open] {
 			summary + div {
-				@media screen and (prefers-reduced-motion: no-preference) {
+				@media screen and (p_refers-reduced-motion: no-p_reference) {
 					animation: accordion-open
 						#{variables.$db-transition-straight-emotional} normal
 						both;
diff --git a/packages/components/src/components/accordion/accordion.lite.tsx b/packages/components/src/components/accordion/accordion.lite.tsx
index 41193e14503..0cf5037e385 100644
--- a/packages/components/src/components/accordion/accordion.lite.tsx
+++ b/packages/components/src/components/accordion/accordion.lite.tsx
@@ -3,6 +3,7 @@ import {
 	onMount,
 	onUpdate,
 	Show,
+	useDefaultProps,
 	useMetadata,
 	useRef,
 	useStore
@@ -15,8 +16,10 @@ import { DEFAULT_ID } from '../../shared/constants';
 
 useMetadata({});
 
+useDefaultProps<DBAccordionProps>({});
+
 export default function DBAccordion(props: DBAccordionProps) {
-	const ref = useRef<HTMLUListElement>(null);
+	const _ref = useRef<HTMLUListElement | null>(null);
 	// jscpd:ignore-start
 	const state = useStore<DBAccordionState>({
 		_id: DEFAULT_ID,
@@ -68,8 +71,8 @@ export default function DBAccordion(props: DBAccordionProps) {
 	}, [state.initialized, props.name, props.behaviour, state._id]);
 
 	onUpdate(() => {
-		if (ref) {
-			const childDetails = ref.getElementsByTagName('details');
+		if (_ref) {
+			const childDetails = _ref.getElementsByTagName('details');
 			if (childDetails) {
 				for (const details of Array.from<HTMLDetailsElement>(
 					childDetails
@@ -82,12 +85,12 @@ export default function DBAccordion(props: DBAccordionProps) {
 				}
 			}
 		}
-	}, [ref, state._name]);
+	}, [_ref, state._name]);
 
 	onUpdate(() => {
-		if (ref && state._initOpenIndexDone) {
+		if (_ref && state._initOpenIndexDone) {
 			if (props?.initOpenIndex && props.initOpenIndex?.length > 0) {
-				const childDetails = ref.getElementsByTagName('details');
+				const childDetails = _ref.getElementsByTagName('details');
 				if (childDetails) {
 					const initOpenIndex =
 						props.behaviour === 'single' &&
@@ -105,11 +108,11 @@ export default function DBAccordion(props: DBAccordionProps) {
 			}
 			state._initOpenIndexDone = false;
 		}
-	}, [ref, state._initOpenIndexDone, props.initOpenIndex]);
+	}, [_ref, state._initOpenIndexDone, props.initOpenIndex]);
 
 	return (
 		<ul
-			ref={ref}
+			ref={_ref}
 			id={state._id}
 			class={cls('db-accordion', props.className)}
 			data-variant={props.variant}>
diff --git a/packages/components/src/components/badge/badge.lite.tsx b/packages/components/src/components/badge/badge.lite.tsx
index c0a11fe0e57..80d1bba37bc 100644
--- a/packages/components/src/components/badge/badge.lite.tsx
+++ b/packages/components/src/components/badge/badge.lite.tsx
@@ -2,6 +2,7 @@ import {
 	onMount,
 	onUpdate,
 	Show,
+	useDefaultProps,
 	useMetadata,
 	useRef,
 	useStore
@@ -12,8 +13,10 @@ import { DEFAULT_LABEL } from '../../shared/constants';
 
 useMetadata({});
 
+useDefaultProps<DBBadgeProps>({});
+
 export default function DBBadge(props: DBBadgeProps) {
-	const ref = useRef<HTMLSpanElement>(null);
+	const _ref = useRef<HTMLSpanElement | null>(null);
 	const state = useStore<DBBadgeState>({
 		initialized: false
 	});
@@ -23,9 +26,9 @@ export default function DBBadge(props: DBBadgeProps) {
 	});
 
 	onUpdate(() => {
-		if (ref && state.initialized) {
+		if (_ref && state.initialized) {
 			if (props.placement?.startsWith('corner')) {
-				let parent = ref.parentElement;
+				let parent = _ref.parentElement;
 
 				if (parent && parent.localName.includes('badge')) {
 					// Angular workaround
@@ -37,11 +40,11 @@ export default function DBBadge(props: DBBadgeProps) {
 				}
 			}
 		}
-	}, [ref, state.initialized]);
+	}, [_ref, state.initialized]);
 
 	return (
 		<span
-			ref={ref}
+			ref={_ref}
 			id={props.id}
 			class={cls('db-badge', props.className)}
 			data-semantic={props.semantic}
diff --git a/packages/components/src/components/brand/brand.lite.tsx b/packages/components/src/components/brand/brand.lite.tsx
index c5e4135f7c0..51f9df76b47 100644
--- a/packages/components/src/components/brand/brand.lite.tsx
+++ b/packages/components/src/components/brand/brand.lite.tsx
@@ -1,19 +1,27 @@
-import { Show, useMetadata, useRef, useStore } from '@builder.io/mitosis';
+import {
+	Show,
+	useDefaultProps,
+	useMetadata,
+	useRef,
+	useStore
+} from '@builder.io/mitosis';
 import { cls, getHideProp } from '../../utils';
 import { DBBrandProps, DBBrandState } from './model';
 import { DEFAULT_ICON } from '../../shared/constants';
 
 useMetadata({});
 
+useDefaultProps<DBBrandProps>({});
+
 export default function DBBrand(props: DBBrandProps) {
-	const ref = useRef<HTMLDivElement>(null);
+	const _ref = useRef<HTMLDivElement | null>(null);
 	// jscpd:ignore-start
 	const state = useStore<DBBrandState>({});
 	// jscpd:ignore-end
 
 	return (
 		<div
-			ref={ref}
+			ref={_ref}
 			data-icon={props.hideLogo ? 'none' : (props.icon ?? DEFAULT_ICON)}
 			data-hide-icon={getHideProp(props.showIcon)}
 			id={props.id}
diff --git a/packages/components/src/components/button/button.lite.tsx b/packages/components/src/components/button/button.lite.tsx
index f8d2ba114c2..b6d846c2c96 100644
--- a/packages/components/src/components/button/button.lite.tsx
+++ b/packages/components/src/components/button/button.lite.tsx
@@ -1,4 +1,10 @@
-import { Show, useMetadata, useRef, useStore } from '@builder.io/mitosis';
+import {
+	Show,
+	useDefaultProps,
+	useMetadata,
+	useRef,
+	useStore
+} from '@builder.io/mitosis';
 import type { DBButtonProps, DBButtonState } from './model';
 import { cls, getBooleanAsString, getHideProp } from '../../utils';
 import { ClickEvent } from '../../shared/model';
@@ -9,8 +15,10 @@ useMetadata({
 	}
 });
 
+useDefaultProps<DBButtonProps>({});
+
 export default function DBButton(props: DBButtonProps) {
-	const ref = useRef<HTMLButtonElement>(null);
+	const _ref = useRef<HTMLButtonElement | null>(null);
 	// jscpd:ignore-start
 	const state = useStore<DBButtonState>({
 		handleClick: (event: ClickEvent<HTMLButtonElement>) => {
@@ -24,7 +32,7 @@ export default function DBButton(props: DBButtonProps) {
 
 	return (
 		<button
-			ref={ref}
+			ref={_ref}
 			id={props.id}
 			class={cls('db-button', props.className)}
 			type={props.type || 'button'}
diff --git a/packages/components/src/components/card/card.lite.tsx b/packages/components/src/components/card/card.lite.tsx
index 0855be9980f..6e423a7b6b7 100644
--- a/packages/components/src/components/card/card.lite.tsx
+++ b/packages/components/src/components/card/card.lite.tsx
@@ -1,12 +1,19 @@
-import { useMetadata, useRef, useStore } from '@builder.io/mitosis';
+import {
+	useDefaultProps,
+	useMetadata,
+	useRef,
+	useStore
+} from '@builder.io/mitosis';
 import type { DBCardProps, DBCardState } from './model';
 import { cls } from '../../utils';
 import { ClickEvent } from '../../shared/model';
 
 useMetadata({});
 
+useDefaultProps<DBCardProps>({});
+
 export default function DBCard(props: DBCardProps) {
-	const ref = useRef<HTMLDivElement>(null);
+	const _ref = useRef<HTMLDivElement | null>(null);
 	// jscpd:ignore-start
 	const state = useStore<DBCardState>({
 		handleClick: (event: ClickEvent<HTMLElement>) => {
@@ -20,7 +27,7 @@ export default function DBCard(props: DBCardProps) {
 
 	return (
 		<div
-			ref={ref}
+			ref={_ref}
 			id={props.id}
 			class={cls('db-card', props.className)}
 			data-behaviour={props.behaviour}
diff --git a/packages/components/src/components/checkbox/checkbox.lite.tsx b/packages/components/src/components/checkbox/checkbox.lite.tsx
index 36f058f316d..310caf62dcf 100644
--- a/packages/components/src/components/checkbox/checkbox.lite.tsx
+++ b/packages/components/src/components/checkbox/checkbox.lite.tsx
@@ -2,6 +2,7 @@ import {
 	onMount,
 	onUpdate,
 	Show,
+	useDefaultProps,
 	useMetadata,
 	useRef,
 	useStore,
@@ -11,9 +12,9 @@ import { DBCheckboxProps, DBCheckboxState } from './model';
 import {
 	cls,
 	delay,
-	stringPropVisible,
 	getHideProp,
 	hasVoiceOver,
+	stringPropVisible,
 	uuid
 } from '../../utils';
 import {
@@ -33,8 +34,10 @@ useMetadata({
 	}
 });
 
+useDefaultProps<DBCheckboxProps>({});
+
 export default function DBCheckbox(props: DBCheckboxProps) {
-	const ref = useRef<HTMLInputElement>(null);
+	const _ref = useRef<HTMLInputElement | null>(null);
 	// jscpd:ignore-start
 	const state = useStore<DBCheckboxState>({
 		initialized: false,
@@ -59,18 +62,18 @@ export default function DBCheckbox(props: DBCheckboxProps) {
 			});
 
 			/* For a11y reasons we need to map the correct message with the checkbox */
-			if (!ref?.validity.valid || props.validation === 'invalid') {
+			if (!_ref?.validity.valid || props.validation === 'invalid') {
 				state._descByIds = state._invalidMessageId;
 				if (hasVoiceOver()) {
 					state._voiceOverFallback =
 						props.invalidMessage ??
-						ref?.validationMessage ??
+						_ref?.validationMessage ??
 						DEFAULT_INVALID_MESSAGE;
 					delay(() => (state._voiceOverFallback = ''), 1000);
 				}
 			} else if (
 				props.validation === 'valid' ||
-				(ref?.validity.valid && props.required)
+				(_ref?.validity.valid && props.required)
 			) {
 				state._descByIds = state._validMessageId;
 				if (hasVoiceOver()) {
@@ -159,7 +162,7 @@ export default function DBCheckbox(props: DBCheckboxProps) {
 				<input
 					aria-invalid={props.validation === 'invalid'}
 					data-custom-validity={props.validation}
-					ref={ref}
+					ref={_ref}
 					type="checkbox"
 					id={state._id}
 					name={props.name}
@@ -204,7 +207,7 @@ export default function DBCheckbox(props: DBCheckboxProps) {
 				size="small"
 				semantic="critical">
 				{props.invalidMessage ??
-					ref?.validationMessage ??
+					_ref?.validationMessage ??
 					DEFAULT_INVALID_MESSAGE}
 			</DBInfotext>
 
diff --git a/packages/components/src/components/checkbox/docs/Vue.md b/packages/components/src/components/checkbox/docs/Vue.md
index 30de158f032..8c0f990391b 100644
--- a/packages/components/src/components/checkbox/docs/Vue.md
+++ b/packages/components/src/components/checkbox/docs/Vue.md
@@ -8,8 +8,8 @@ For general installation and configuration take a look at the [v-components](htt
 <!-- App.vue -->
 <script setup lang="ts">
 import { DBCheckbox } from "@db-ui/v-components";
-import { ref } from "vue";
-const checkbox = ref("");
+import { _ref } from "vue";
+const checkbox = _ref("");
 </script>
 
 <template>
diff --git a/packages/components/src/components/divider/divider.lite.tsx b/packages/components/src/components/divider/divider.lite.tsx
index b332eebf73e..08da90caf5f 100644
--- a/packages/components/src/components/divider/divider.lite.tsx
+++ b/packages/components/src/components/divider/divider.lite.tsx
@@ -1,11 +1,18 @@
-import { useMetadata, useRef, useStore } from '@builder.io/mitosis';
+import {
+	useDefaultProps,
+	useMetadata,
+	useRef,
+	useStore
+} from '@builder.io/mitosis';
 import { DBDividerProps, DBDividerState } from './model';
 import { cls } from '../../utils';
 
 useMetadata({});
 
+useDefaultProps<DBDividerProps>({});
+
 export default function DBDivider(props: DBDividerProps) {
-	const ref = useRef<HTMLDivElement>(null);
+	const _ref = useRef<HTMLDivElement | null>(null);
 	// jscpd:ignore-start
 	const state = useStore<DBDividerState>({});
 
@@ -13,7 +20,7 @@ export default function DBDivider(props: DBDividerProps) {
 
 	return (
 		<div
-			ref={ref}
+			ref={_ref}
 			id={props.id}
 			data-margin={props.margin}
 			data-variant={props.variant}
diff --git a/packages/components/src/components/drawer/docs/Vue.md b/packages/components/src/components/drawer/docs/Vue.md
index 31c2b265cd5..6e5d9340302 100644
--- a/packages/components/src/components/drawer/docs/Vue.md
+++ b/packages/components/src/components/drawer/docs/Vue.md
@@ -11,10 +11,10 @@ If you use `width !== full` you are able to overwrite the `max-width` with `--db
 ```vue App.vue
 <!-- App.vue -->
 <script setup lang="ts">
-import { ref } from "vue";
+import { _ref } from "vue";
 import { DBDrawer } from "@db-ui/v-components";
 
-const openDrawer = ref<boolean>(false);
+const openDrawer = _ref<boolean>(false);
 
 const toggleDrawer = (open: boolean) => {
 	openDrawer.value = open;
diff --git a/packages/components/src/components/drawer/drawer.lite.tsx b/packages/components/src/components/drawer/drawer.lite.tsx
index 8e57502963c..2824f3d1a7c 100644
--- a/packages/components/src/components/drawer/drawer.lite.tsx
+++ b/packages/components/src/components/drawer/drawer.lite.tsx
@@ -2,6 +2,7 @@ import {
 	onMount,
 	onUpdate,
 	Slot,
+	useDefaultProps,
 	useMetadata,
 	useRef,
 	useStore
@@ -13,9 +14,13 @@ import { cls, delay } from '../../utils';
 
 useMetadata({});
 
+useDefaultProps<DBDrawerProps>({
+	closeButtonText: DEFAULT_CLOSE_BUTTON
+});
+
 export default function DBDrawer(props: DBDrawerProps) {
-	const ref = useRef<HTMLDialogElement>(null);
-	const dialogContainerRef = useRef<HTMLDivElement>(null);
+	const _ref = useRef<HTMLDialogElement | null>(null);
+	const dialogContainerRef = useRef<HTMLDivElement | null>(null);
 	const state = useStore<DBDrawerState>({
 		// eslint-disable-next-line @typescript-eslint/no-explicit-any
 		handleClose: (event: any) => {
@@ -36,8 +41,8 @@ export default function DBDrawer(props: DBDrawerProps) {
 			}
 		},
 		handleDialogOpen: () => {
-			if (ref) {
-				if (props.open && !ref.open) {
+			if (_ref) {
+				if (props.open && !_ref.open) {
 					if (dialogContainerRef) {
 						dialogContainerRef.hidden = false;
 					}
@@ -45,12 +50,12 @@ export default function DBDrawer(props: DBDrawerProps) {
 						props.backdrop === 'none' ||
 						props.variant === 'inside'
 					) {
-						ref.show();
+						_ref.show();
 					} else {
-						ref.showModal();
+						_ref.showModal();
 					}
 				}
-				if (!props.open && ref.open) {
+				if (!props.open && _ref.open) {
 					if (dialogContainerRef) {
 						dialogContainerRef.hidden = true;
 					}
@@ -58,7 +63,7 @@ export default function DBDrawer(props: DBDrawerProps) {
 						if (dialogContainerRef) {
 							dialogContainerRef.hidden = false;
 						}
-						ref?.close();
+						_ref?.close();
 					}, 401);
 				}
 			}
@@ -76,7 +81,7 @@ export default function DBDrawer(props: DBDrawerProps) {
 	return (
 		<dialog
 			id={props.id}
-			ref={ref}
+			ref={_ref}
 			class="db-drawer"
 			onClick={(event) => {
 				state.handleClose(event);
@@ -102,7 +107,7 @@ export default function DBDrawer(props: DBDrawerProps) {
 						variant="ghost"
 						noText
 						onClick={() => state.handleClose('close')}>
-						{props.closeButtonText ?? DEFAULT_CLOSE_BUTTON}
+						{props.closeButtonText}
 					</DBButton>
 				</header>
 				<div class="db-drawer-content">{props.children}</div>
diff --git a/packages/components/src/components/drawer/drawer.scss b/packages/components/src/components/drawer/drawer.scss
index caa46503180..00f603d08d1 100644
--- a/packages/components/src/components/drawer/drawer.scss
+++ b/packages/components/src/components/drawer/drawer.scss
@@ -174,7 +174,7 @@ $spacings: (
 
 	&[open] {
 		.db-drawer-container {
-			@media screen and (prefers-reduced-motion: no-preference) {
+			@media screen and (p_refers-reduced-motion: no-p_reference) {
 				&:not([data-direction]),
 				&[data-direction="right"] {
 					animation: show-right-to-left
@@ -198,7 +198,7 @@ $spacings: (
 			}
 
 			&[hidden] {
-				@media screen and (prefers-reduced-motion: no-preference) {
+				@media screen and (p_refers-reduced-motion: no-p_reference) {
 					&:not([data-direction]),
 					&[data-direction="right"] {
 						animation: hide-right-to-left
diff --git a/packages/components/src/components/header/docs/Vue.md b/packages/components/src/components/header/docs/Vue.md
index 6f86fee9edf..1491b8fcf25 100644
--- a/packages/components/src/components/header/docs/Vue.md
+++ b/packages/components/src/components/header/docs/Vue.md
@@ -24,10 +24,10 @@ import { DBHeader, DBBrand } from "@db-ui/v-components";
 ```vue App.vue
 <!-- App.vue -->
 <script>
-import { ref } from "vue";
+import { _ref } from "vue";
 import { DBHeader, DBBrand, DBLink, DBButton } from "@db-ui/v-components";
 
-const drawerOpen = ref(false);
+const drawerOpen = _ref(false);
 
 const toggleDrawer = (open: boolean) => {
 	drawerOpen.value = open;
diff --git a/packages/components/src/components/header/header.lite.tsx b/packages/components/src/components/header/header.lite.tsx
index 89560ecad3e..558da5db9ea 100644
--- a/packages/components/src/components/header/header.lite.tsx
+++ b/packages/components/src/components/header/header.lite.tsx
@@ -2,6 +2,7 @@ import {
 	onMount,
 	onUpdate,
 	Slot,
+	useDefaultProps,
 	useMetadata,
 	useRef,
 	useStore
@@ -15,8 +16,10 @@ import { isEventTargetNavigationItem } from '../../utils/navigation';
 
 useMetadata({});
 
+useDefaultProps<DBHeaderProps>({});
+
 export default function DBHeader(props: DBHeaderProps) {
-	const ref = useRef<HTMLDivElement>(null);
+	const _ref = useRef<HTMLDivElement | null>(null);
 	// jscpd:ignore-start
 	const state = useStore<DBHeaderState>({
 		_id: DEFAULT_ID,
@@ -60,7 +63,7 @@ export default function DBHeader(props: DBHeaderProps) {
 
 	return (
 		<header
-			ref={ref}
+			ref={_ref}
 			class={cls('db-header', props.className)}
 			id={state._id}
 			data-width={props.width}
diff --git a/packages/components/src/components/icon/icon.lite.tsx b/packages/components/src/components/icon/icon.lite.tsx
index f9519768289..a0d16e514fc 100644
--- a/packages/components/src/components/icon/icon.lite.tsx
+++ b/packages/components/src/components/icon/icon.lite.tsx
@@ -1,11 +1,19 @@
-import { Show, useMetadata, useRef, useStore } from '@builder.io/mitosis';
+import {
+	Show,
+	useDefaultProps,
+	useMetadata,
+	useRef,
+	useStore
+} from '@builder.io/mitosis';
 import type { DBIconProps, DBIconState } from './model';
 import { cls } from '../../utils';
 
 useMetadata({});
 
+useDefaultProps<DBIconProps>({});
+
 export default function DBIcon(props: DBIconProps) {
-	const ref = useRef<HTMLSpanElement>(null);
+	const _ref = useRef<HTMLSpanElement | null>(null);
 	// jscpd:ignore-start
 	const state = useStore<DBIconState>({});
 
@@ -13,7 +21,7 @@ export default function DBIcon(props: DBIconProps) {
 
 	return (
 		<span
-			ref={ref}
+			ref={_ref}
 			id={props.id}
 			class={cls('db-icon', props.className)}
 			data-icon={props.icon}
diff --git a/packages/components/src/components/infotext/infotext.lite.tsx b/packages/components/src/components/infotext/infotext.lite.tsx
index e3b32d123c8..af3c206797a 100644
--- a/packages/components/src/components/infotext/infotext.lite.tsx
+++ b/packages/components/src/components/infotext/infotext.lite.tsx
@@ -1,11 +1,19 @@
-import { Show, useMetadata, useRef, useStore } from '@builder.io/mitosis';
+import {
+	Show,
+	useDefaultProps,
+	useMetadata,
+	useRef,
+	useStore
+} from '@builder.io/mitosis';
 import { DBInfotextProps, DBInfotextState } from './model';
 import { cls, getHideProp } from '../../utils';
 
 useMetadata({});
 
+useDefaultProps<DBInfotextProps>({});
+
 export default function DBInfotext(props: DBInfotextProps) {
-	const ref = useRef<HTMLSpanElement>(null);
+	const _ref = useRef<HTMLSpanElement | null>(null);
 	// jscpd:ignore-start
 	const state = useStore<DBInfotextState>({});
 	// jscpd:ignore-end
@@ -13,7 +21,7 @@ export default function DBInfotext(props: DBInfotextProps) {
 	// TODO: Check if this should be a div or a span
 	return (
 		<span
-			ref={ref}
+			ref={_ref}
 			id={props.id}
 			class={cls('db-infotext', props.className)}
 			data-icon={props.icon}
diff --git a/packages/components/src/components/input/input.lite.tsx b/packages/components/src/components/input/input.lite.tsx
index 52f133993de..0587b5daf9d 100644
--- a/packages/components/src/components/input/input.lite.tsx
+++ b/packages/components/src/components/input/input.lite.tsx
@@ -3,6 +3,7 @@ import {
 	onMount,
 	onUpdate,
 	Show,
+	useDefaultProps,
 	useMetadata,
 	useRef,
 	useStore,
@@ -11,10 +12,10 @@ import {
 import {
 	cls,
 	delay,
-	stringPropVisible,
 	getHideProp,
 	hasVoiceOver,
 	isArrayOfStrings,
+	stringPropVisible,
 	uuid
 } from '../../utils';
 import { DBInputProps, DBInputState } from './model';
@@ -43,8 +44,10 @@ useMetadata({
 	}
 });
 
+useDefaultProps<DBInputProps>({});
+
 export default function DBInput(props: DBInputProps) {
-	const ref = useRef<HTMLInputElement>(null);
+	const _ref = useRef<HTMLInputElement | null>(null);
 	// jscpd:ignore-start
 	const state = useStore<DBInputState>({
 		_id: undefined,
@@ -79,18 +82,18 @@ export default function DBInput(props: DBInputProps) {
 			});
 
 			/* For a11y reasons we need to map the correct message with the input */
-			if (!ref?.validity.valid || props.validation === 'invalid') {
+			if (!_ref?.validity.valid || props.validation === 'invalid') {
 				state._descByIds = state._invalidMessageId;
 				if (hasVoiceOver()) {
 					state._voiceOverFallback =
 						props.invalidMessage ??
-						ref?.validationMessage ??
+						_ref?.validationMessage ??
 						DEFAULT_INVALID_MESSAGE;
 					delay(() => (state._voiceOverFallback = ''), 1000);
 				}
 			} else if (
 				props.validation === 'valid' ||
-				(ref?.validity.valid &&
+				(_ref?.validity.valid &&
 					(props.required ||
 						props.minLength ||
 						props.maxLength ||
@@ -182,7 +185,7 @@ export default function DBInput(props: DBInputProps) {
 			<input
 				aria-invalid={props.validation === 'invalid'}
 				data-custom-validity={props.validation}
-				ref={ref}
+				ref={_ref}
 				id={state._id}
 				name={props.name}
 				type={props.type || 'text'}
@@ -253,7 +256,7 @@ export default function DBInput(props: DBInputProps) {
 				size="small"
 				semantic="critical">
 				{props.invalidMessage ??
-					ref?.validationMessage ??
+					_ref?.validationMessage ??
 					DEFAULT_INVALID_MESSAGE}
 			</DBInfotext>
 
diff --git a/packages/components/src/components/input/input.scss b/packages/components/src/components/input/input.scss
index b35ad4a8f0e..1d6002bed36 100644
--- a/packages/components/src/components/input/input.scss
+++ b/packages/components/src/components/input/input.scss
@@ -39,7 +39,7 @@ $icon-padding: calc(
 		&::after {
 			opacity: 0;
 
-			@media screen and (prefers-reduced-motion: no-preference) {
+			@media screen and (p_refers-reduced-motion: no-p_reference) {
 				transition: opacity variables.$db-transition-duration-fast;
 			}
 		}
diff --git a/packages/components/src/components/link/link.lite.tsx b/packages/components/src/components/link/link.lite.tsx
index e316fbcbbb0..324b2c506b2 100644
--- a/packages/components/src/components/link/link.lite.tsx
+++ b/packages/components/src/components/link/link.lite.tsx
@@ -1,18 +1,22 @@
-import { Show, useMetadata, useRef, useStore } from '@builder.io/mitosis';
+import {
+	Show,
+	useDefaultProps,
+	useMetadata,
+	useRef,
+	useStore
+} from '@builder.io/mitosis';
 import { DBLinkProps, DBLinkState } from './model';
 import { cls, getBooleanAsString, getHideProp } from '../../utils';
 import { ClickEvent } from '../../shared/model';
-import { DEFAULT_ID } from '../../shared/constants';
 
-useMetadata({
-	isAttachedToShadowDom: false
-});
+useMetadata({});
+
+useDefaultProps<DBLinkProps>({});
 
 export default function DBLink(props: DBLinkProps) {
-	const ref = useRef<HTMLAnchorElement>(null);
+	const _ref = useRef<HTMLAnchorElement | null>(null);
 	// jscpd:ignore-start
 	const state = useStore<DBLinkState>({
-		_id: DEFAULT_ID,
 		handleClick: (event: ClickEvent<HTMLAnchorElement>) => {
 			if (props.onClick) {
 				props.onClick(event);
@@ -24,7 +28,7 @@ export default function DBLink(props: DBLinkProps) {
 
 	return (
 		<a
-			ref={ref}
+			ref={_ref}
 			id={props.id}
 			class={cls('db-link', props.className)}
 			href={props.href}
diff --git a/packages/components/src/components/navigation-item/navigation-item.lite.tsx b/packages/components/src/components/navigation-item/navigation-item.lite.tsx
index 40c40ea56d2..24f810be2c7 100644
--- a/packages/components/src/components/navigation-item/navigation-item.lite.tsx
+++ b/packages/components/src/components/navigation-item/navigation-item.lite.tsx
@@ -3,6 +3,7 @@ import {
 	onUpdate,
 	Show,
 	Slot,
+	useDefaultProps,
 	useMetadata,
 	useRef,
 	useStore
@@ -16,8 +17,10 @@ import { ClickEvent } from '../../shared/model';
 
 useMetadata({});
 
+useDefaultProps<DBNavigationItemProps>({});
+
 export default function DBNavigationItem(props: DBNavigationItemProps) {
-	const ref = useRef<HTMLLIElement>(null);
+	const _ref = useRef<HTMLLIElement | null>(null);
 
 	// jscpd:ignore-start
 	const state = useStore<DBNavigationItemState>({
@@ -56,7 +59,7 @@ export default function DBNavigationItem(props: DBNavigationItemProps) {
 						if (!state.navigationItemSafeTriangle) {
 							state.navigationItemSafeTriangle =
 								new NavigationItemSafeTriangle(
-									ref,
+									_ref,
 									subNavigationSlot
 								);
 						}
@@ -85,7 +88,7 @@ export default function DBNavigationItem(props: DBNavigationItemProps) {
 
 	return (
 		<li
-			ref={ref}
+			ref={_ref}
 			id={props.id}
 			onMouseOver={() => state.navigationItemSafeTriangle?.enableFollow()}
 			onMouseLeave={() =>
diff --git a/packages/components/src/components/navigation-item/navigation-item.scss b/packages/components/src/components/navigation-item/navigation-item.scss
index 581741ad9bc..1a3e1da7a24 100644
--- a/packages/components/src/components/navigation-item/navigation-item.scss
+++ b/packages/components/src/components/navigation-item/navigation-item.scss
@@ -23,7 +23,7 @@
 	// show/hide sub-navigation by click
 	&[aria-expanded="true"] {
 		~ .db-sub-navigation {
-			@media screen and (prefers-reduced-motion: no-preference) {
+			@media screen and (p_refers-reduced-motion: no-p_reference) {
 				transition: visibility 0ms linear 0ms;
 				animation: show-right-to-left
 					#{variables.$db-transition-straight-show};
@@ -38,7 +38,7 @@
 	}
 
 	&:not(&[aria-expanded="true"]) {
-		@media screen and (prefers-reduced-motion: no-preference) {
+		@media screen and (p_refers-reduced-motion: no-p_reference) {
 			~ .db-sub-navigation {
 				transition: visibility 0ms linear 410ms; // hide animation is 0.4s
 				animation: hide-right-to-left
diff --git a/packages/components/src/components/navigation/docs/Accessibility.md b/packages/components/src/components/navigation/docs/Accessibility.md
index 3754246965d..93f9a1346f4 100644
--- a/packages/components/src/components/navigation/docs/Accessibility.md
+++ b/packages/components/src/components/navigation/docs/Accessibility.md
@@ -3,7 +3,7 @@
 ### Active item / current page
 
 To implicitly set a `NavigationItem` to **active**, the attribute `aria-current="page"` is applied to the contained anchor.
-Some frameworks (vue, angular) offer internal, automatic solutions for this. These should preferably be used.
+Some frameworks (vue, angular) offer internal, automatic solutions for this. These should p_referably be used.
 
 This leads to:
 
diff --git a/packages/components/src/components/navigation/navigation.lite.tsx b/packages/components/src/components/navigation/navigation.lite.tsx
index 7fb1bd03a34..96743cb9c9a 100644
--- a/packages/components/src/components/navigation/navigation.lite.tsx
+++ b/packages/components/src/components/navigation/navigation.lite.tsx
@@ -1,12 +1,20 @@
-import { onMount, useMetadata, useRef, useStore } from '@builder.io/mitosis';
+import {
+	onMount,
+	useDefaultProps,
+	useMetadata,
+	useRef,
+	useStore
+} from '@builder.io/mitosis';
 import { DBNavigationProps, DBNavigationState } from './model';
 import { cls, uuid } from '../../utils';
 import { DEFAULT_ID } from '../../shared/constants';
 
 useMetadata({});
 
+useDefaultProps<DBNavigationProps>({});
+
 export default function DBNavigation(props: DBNavigationProps) {
-	const ref = useRef<HTMLDivElement>(null);
+	const _ref = useRef<HTMLDivElement | null>(null);
 	// jscpd:ignore-start
 	const state = useStore<DBNavigationState>({
 		_id: DEFAULT_ID
@@ -20,7 +28,7 @@ export default function DBNavigation(props: DBNavigationProps) {
 
 	return (
 		<nav
-			ref={ref}
+			ref={_ref}
 			id={state._id}
 			aria-labelledby={props.labelledBy}
 			class={cls('db-navigation', props.className)}>
diff --git a/packages/components/src/components/navigation/navigation.scss b/packages/components/src/components/navigation/navigation.scss
index f960165c599..90d2c092154 100644
--- a/packages/components/src/components/navigation/navigation.scss
+++ b/packages/components/src/components/navigation/navigation.scss
@@ -35,7 +35,7 @@
 						--db-icon-margin-start: #{variables.$db-spacing-fixed-sm};
 						--db-icon-after: "chevron_down";
 
-						@media screen and (prefers-reduced-motion: no-preference) {
+						@media screen and (p_refers-reduced-motion: no-p_reference) {
 							transition: form-components.$dropdown-icon-transition;
 						}
 					}
diff --git a/packages/components/src/components/notification/notification.lite.tsx b/packages/components/src/components/notification/notification.lite.tsx
index 89ccadf367f..f0d3148b033 100644
--- a/packages/components/src/components/notification/notification.lite.tsx
+++ b/packages/components/src/components/notification/notification.lite.tsx
@@ -1,4 +1,11 @@
-import { Show, Slot, useMetadata, useRef, useStore } from '@builder.io/mitosis';
+import {
+	Show,
+	Slot,
+	useDefaultProps,
+	useMetadata,
+	useRef,
+	useStore
+} from '@builder.io/mitosis';
 import { DBNotificationProps, DBNotificationState } from './model';
 import DBButton from '../button/button.lite';
 import { DEFAULT_CLOSE_BUTTON } from '../../shared/constants';
@@ -7,8 +14,10 @@ import { ClickEvent } from '../../shared/model';
 
 useMetadata({});
 
+useDefaultProps<DBNotificationProps>({});
+
 export default function DBNotification(props: DBNotificationProps) {
-	const ref = useRef<HTMLDivElement>(null);
+	const _ref = useRef<HTMLDivElement | null>(null);
 	// jscpd:ignore-start
 	const state = useStore<DBNotificationState>({
 		handleClose: (event: ClickEvent<HTMLButtonElement>) => {
@@ -21,7 +30,7 @@ export default function DBNotification(props: DBNotificationProps) {
 
 	return (
 		<article
-			ref={ref}
+			ref={_ref}
 			id={props.id}
 			class={cls('db-notification', props.className)}
 			aria-live={props.ariaLive}
diff --git a/packages/components/src/components/page/page.lite.tsx b/packages/components/src/components/page/page.lite.tsx
index ad3cbf9f674..4de610f5de6 100644
--- a/packages/components/src/components/page/page.lite.tsx
+++ b/packages/components/src/components/page/page.lite.tsx
@@ -3,6 +3,7 @@ import {
 	onMount,
 	onUnMount,
 	Slot,
+	useDefaultProps,
 	useMetadata,
 	useRef,
 	useStore
@@ -11,9 +12,10 @@ import { DBPageProps, DBPageState } from './model';
 import { cls, getBooleanAsString } from '../../utils';
 
 useMetadata({});
+useDefaultProps<DBPageProps>({});
 
 export default function DBPage(props: DBPageProps) {
-	const ref = useRef<HTMLDivElement>(null);
+	const _ref = useRef<HTMLDivElement | null>(null);
 	// jscpd:ignore-start
 	const state = useStore<DBPageState>({
 		fontsLoaded: false
@@ -59,7 +61,7 @@ export default function DBPage(props: DBPageProps) {
 
 	return (
 		<div
-			ref={ref}
+			ref={_ref}
 			id={props.id}
 			class={cls('db-page', props.className)}
 			data-variant={props.variant}
diff --git a/packages/components/src/components/page/page.scss b/packages/components/src/components/page/page.scss
index 590521ce3cb..b7d9b902ae4 100644
--- a/packages/components/src/components/page/page.scss
+++ b/packages/components/src/components/page/page.scss
@@ -17,7 +17,7 @@
 .db-page {
 	opacity: 0;
 
-	@media screen and (prefers-reduced-motion: no-preference) {
+	@media screen and (p_refers-reduced-motion: no-p_reference) {
 		&[data-fade-in="true"] {
 			transition: opacity variables.$db-transition-straight-emotional;
 		}
diff --git a/packages/components/src/components/popover/popover.lite.tsx b/packages/components/src/components/popover/popover.lite.tsx
index 1f3a51875ea..69d9775afc5 100644
--- a/packages/components/src/components/popover/popover.lite.tsx
+++ b/packages/components/src/components/popover/popover.lite.tsx
@@ -2,6 +2,7 @@ import {
 	onMount,
 	onUpdate,
 	Slot,
+	useDefaultProps,
 	useMetadata,
 	useRef,
 	useStore
@@ -10,17 +11,18 @@ import { DBPopoverProps, DBPopoverState } from './model';
 import { cls, getBooleanAsString, handleDataOutside } from '../../utils';
 
 useMetadata({});
+useDefaultProps<DBPopoverProps>({});
 
 export default function DBPopover(props: DBPopoverProps) {
-	const ref = useRef<HTMLDivElement>(null);
+	const _ref = useRef<HTMLDivElement | null>(null);
 	// jscpd:ignore-start
 	const state = useStore<DBPopoverState>({
 		initialized: false,
 		isExpanded: false,
 		handleAutoPlacement: () => {
 			state.isExpanded = true;
-			if (!ref) return;
-			const article = ref.querySelector('article');
+			if (!_ref) return;
+			const article = _ref.querySelector('article');
 			if (!article) return;
 			handleDataOutside(article);
 		},
@@ -39,8 +41,8 @@ export default function DBPopover(props: DBPopoverProps) {
 			}
 		},
 		getTrigger: (): Element | null => {
-			if (ref) {
-				const children: Element[] = Array.from(ref.children);
+			if (_ref) {
+				const children: Element[] = Array.from(_ref.children);
 				if (children.length >= 2) {
 					const firstChild = children[0];
 					if (firstChild.tagName.includes('-')) {
@@ -63,29 +65,29 @@ export default function DBPopover(props: DBPopoverProps) {
 	});
 
 	onUpdate(() => {
-		if (ref && state.initialized) {
+		if (_ref && state.initialized) {
 			const child = state.getTrigger();
 			if (child) {
 				child.ariaHasPopup = 'true';
 			}
 			state.initialized = false;
 		}
-	}, [ref, state.initialized]);
+	}, [_ref, state.initialized]);
 
 	onUpdate(() => {
-		if (ref) {
+		if (_ref) {
 			const child = state.getTrigger();
 			if (child) {
 				child.ariaExpanded = Boolean(state.isExpanded).toString();
 			}
 		}
-	}, [ref, state.isExpanded]);
+	}, [_ref, state.isExpanded]);
 
 	// jscpd:ignore-end
 
 	return (
 		<div
-			ref={ref}
+			ref={_ref}
 			id={props.id}
 			class={cls('db-popover', props.className)}
 			onFocus={() => state.handleAutoPlacement()}
diff --git a/packages/components/src/components/radio/docs/Vue.md b/packages/components/src/components/radio/docs/Vue.md
index 4fc35b795ac..46f4fbb29f9 100644
--- a/packages/components/src/components/radio/docs/Vue.md
+++ b/packages/components/src/components/radio/docs/Vue.md
@@ -8,8 +8,8 @@ For general installation and configuration take a look at the [v-components](htt
 <!-- App.vue -->
 <script setup lang="ts">
 import { DBRadio } from "@db-ui/v-components";
-import { ref } from "vue";
-const radio = ref("");
+import { _ref } from "vue";
+const radio = _ref("");
 
 const radioNames = ["X", "Y", "Z"];
 </script>
diff --git a/packages/components/src/components/radio/radio.lite.tsx b/packages/components/src/components/radio/radio.lite.tsx
index f9636f21491..70e4c024e7f 100644
--- a/packages/components/src/components/radio/radio.lite.tsx
+++ b/packages/components/src/components/radio/radio.lite.tsx
@@ -2,6 +2,7 @@ import {
 	onMount,
 	onUpdate,
 	Show,
+	useDefaultProps,
 	useMetadata,
 	useRef,
 	useStore,
@@ -17,9 +18,10 @@ useMetadata({
 		nativeAttributes: ['disabled', 'required', 'checked', 'indeterminate']
 	}
 });
+useDefaultProps<DBRadioProps>({});
 
 export default function DBRadio(props: DBRadioProps) {
-	const ref = useRef<HTMLInputElement>(null);
+	const _ref = useRef<HTMLInputElement | null>(null);
 	// jscpd:ignore-start
 	const state = useStore<DBRadioState>({
 		initialized: false,
@@ -86,7 +88,7 @@ export default function DBRadio(props: DBRadioProps) {
 			<input
 				aria-invalid={props.validation === 'invalid'}
 				data-custom-validity={props.validation}
-				ref={ref}
+				ref={_ref}
 				type="radio"
 				id={state._id}
 				name={props.name}
diff --git a/packages/components/src/components/radio/radio.scss b/packages/components/src/components/radio/radio.scss
index e02a5351699..2da0e81180c 100644
--- a/packages/components/src/components/radio/radio.scss
+++ b/packages/components/src/components/radio/radio.scss
@@ -9,7 +9,7 @@
 		border-color: currentcolor;
 		border-radius: variables.$db-border-radius-full;
 
-		@media screen and (prefers-reduced-motion: no-preference) {
+		@media screen and (p_refers-reduced-motion: no-p_reference) {
 			transition: border-width variables.$db-transition-duration-fast
 				variables.$db-transition-timing-functional;
 		}
diff --git a/packages/components/src/components/section/section.lite.tsx b/packages/components/src/components/section/section.lite.tsx
index 128cf9782a6..2a9a694a21a 100644
--- a/packages/components/src/components/section/section.lite.tsx
+++ b/packages/components/src/components/section/section.lite.tsx
@@ -1,12 +1,19 @@
-import { onMount, useMetadata, useRef, useStore } from '@builder.io/mitosis';
+import {
+	onMount,
+	useDefaultProps,
+	useMetadata,
+	useRef,
+	useStore
+} from '@builder.io/mitosis';
 import { DBSectionProps, DBSectionState } from './model';
 import { cls, uuid } from '../../utils';
 import { DEFAULT_ID } from '../../shared/constants';
 
 useMetadata({});
+useDefaultProps<DBSectionProps>({});
 
 export default function DBSection(props: DBSectionProps) {
-	const ref = useRef<HTMLDivElement>(null);
+	const _ref = useRef<HTMLDivElement | null>(null);
 	// jscpd:ignore-start
 	const state = useStore<DBSectionState>({
 		_id: DEFAULT_ID
@@ -19,7 +26,7 @@ export default function DBSection(props: DBSectionProps) {
 
 	return (
 		<section
-			ref={ref}
+			ref={_ref}
 			id={state._id}
 			class={cls('db-section', props.className)}
 			data-spacing={props.spacing || 'medium'}
diff --git a/packages/components/src/components/select/select.lite.tsx b/packages/components/src/components/select/select.lite.tsx
index f64bfe0a6e0..70350491c04 100644
--- a/packages/components/src/components/select/select.lite.tsx
+++ b/packages/components/src/components/select/select.lite.tsx
@@ -3,6 +3,7 @@ import {
 	onMount,
 	onUpdate,
 	Show,
+	useDefaultProps,
 	useMetadata,
 	useRef,
 	useStore,
@@ -12,9 +13,9 @@ import { DBSelectOptionType, DBSelectProps, DBSelectState } from './model';
 import {
 	cls,
 	delay,
-	stringPropVisible,
 	getHideProp,
 	hasVoiceOver,
+	stringPropVisible,
 	uuid
 } from '../../utils';
 import {
@@ -40,9 +41,10 @@ useMetadata({
 		nativeAttributes: ['disabled', 'required', 'value']
 	}
 });
+useDefaultProps<DBSelectProps>({});
 
 export default function DBSelect(props: DBSelectProps) {
-	const ref = useRef<HTMLSelectElement>(null);
+	const _ref = useRef<HTMLSelectElement | null>(null);
 	// jscpd:ignore-start
 	const state = useStore<DBSelectState>({
 		_id: undefined,
@@ -84,18 +86,18 @@ export default function DBSelect(props: DBSelectProps) {
 			});
 
 			/* For a11y reasons we need to map the correct message with the select */
-			if (!ref?.validity.valid || props.validation === 'invalid') {
+			if (!_ref?.validity.valid || props.validation === 'invalid') {
 				state._descByIds = state._invalidMessageId;
 				if (hasVoiceOver()) {
 					state._voiceOverFallback =
 						props.invalidMessage ??
-						ref?.validationMessage ??
+						_ref?.validationMessage ??
 						DEFAULT_INVALID_MESSAGE;
 					delay(() => (state._voiceOverFallback = ''), 1000);
 				}
 			} else if (
 				props.validation === 'valid' ||
-				(ref?.validity.valid && props.required)
+				(_ref?.validity.valid && props.required)
 			) {
 				state._descByIds = state._validMessageId;
 				if (hasVoiceOver()) {
@@ -177,7 +179,7 @@ export default function DBSelect(props: DBSelectProps) {
 			<select
 				aria-invalid={props.validation === 'invalid'}
 				data-custom-validity={props.validation}
-				ref={ref}
+				ref={_ref}
 				required={props.required}
 				disabled={props.disabled}
 				id={state._id}
@@ -268,7 +270,7 @@ export default function DBSelect(props: DBSelectProps) {
 				size="small"
 				semantic="critical">
 				{props.invalidMessage ??
-					ref?.validationMessage ??
+					_ref?.validationMessage ??
 					DEFAULT_INVALID_MESSAGE}
 			</DBInfotext>
 
diff --git a/packages/components/src/components/stack/stack.lite.tsx b/packages/components/src/components/stack/stack.lite.tsx
index e447f026a58..5620bbf85aa 100644
--- a/packages/components/src/components/stack/stack.lite.tsx
+++ b/packages/components/src/components/stack/stack.lite.tsx
@@ -1,19 +1,25 @@
-import { Show, useMetadata, useRef, useStore } from '@builder.io/mitosis';
-import { DBStackState, DBStackProps } from './model';
+import {
+	useDefaultProps,
+	useMetadata,
+	useRef,
+	useStore
+} from '@builder.io/mitosis';
+import { DBStackProps, DBStackState } from './model';
 import { cls, getBooleanAsString } from '../../utils';
 
 useMetadata({});
+useDefaultProps<DBStackProps>({});
 
 export default function DBStack(props: DBStackProps) {
 	// This is used as forwardRef
-	const ref = useRef<HTMLDivElement>(null);
+	const _ref = useRef<HTMLDivElement | null>(null);
 	// jscpd:ignore-start
 	const state = useStore<DBStackState>({});
 	// jscpd:ignore-end
 
 	return (
 		<div
-			ref={ref}
+			ref={_ref}
 			id={props.id}
 			class={cls('db-stack', props.className)}
 			data-gap={props.gap}
diff --git a/packages/components/src/components/switch/switch.lite.tsx b/packages/components/src/components/switch/switch.lite.tsx
index c0e0319eda8..01e1cd9d0ab 100644
--- a/packages/components/src/components/switch/switch.lite.tsx
+++ b/packages/components/src/components/switch/switch.lite.tsx
@@ -1,13 +1,14 @@
 import {
 	onMount,
 	Show,
+	useDefaultProps,
 	useMetadata,
 	useRef,
 	useStore,
 	useTarget
 } from '@builder.io/mitosis';
 import { DBSwitchProps, DBSwitchState } from './model';
-import { cls, getBooleanAsString, getHideProp, uuid } from '../../utils';
+import { cls, getHideProp, uuid } from '../../utils';
 import { ChangeEvent, InteractionEvent } from '../../shared/model';
 import { handleFrameworkEvent } from '../../utils/form-components';
 
@@ -16,10 +17,11 @@ useMetadata({
 		nativeAttributes: ['disabled', 'required', 'checked', 'indeterminate']
 	}
 });
+useDefaultProps<DBSwitchProps>({});
 
 export default function DBSwitch(props: DBSwitchProps) {
 	// This is used as forwardRef
-	const ref = useRef<HTMLInputElement>(null);
+	const _ref = useRef<HTMLInputElement | null>(null);
 	// jscpd:ignore-start
 	const state = useStore<DBSwitchState>({
 		_id: undefined,
@@ -80,7 +82,7 @@ export default function DBSwitch(props: DBSwitchProps) {
 				type="checkbox"
 				role="switch"
 				aria-checked={state._checked}
-				ref={ref}
+				ref={_ref}
 				checked={props.checked}
 				disabled={props.disabled}
 				aria-describedby={props.describedbyid}
diff --git a/packages/components/src/components/switch/switch.scss b/packages/components/src/components/switch/switch.scss
index 4027a9841a8..2f475d9792e 100644
--- a/packages/components/src/components/switch/switch.scss
+++ b/packages/components/src/components/switch/switch.scss
@@ -86,7 +86,7 @@ $checked-active-transition-size: calc(
 				#{$switch-active-thumb-size} - #{$switch-inactive-thumb-size}
 			);
 
-			@media screen and (prefers-reduced-motion: no-preference) {
+			@media screen and (p_refers-reduced-motion: no-p_reference) {
 				transition:
 					margin variables.$db-transition-duration-fast
 						variables.$db-transition-timing-emotional,
@@ -141,7 +141,7 @@ $checked-active-transition-size: calc(
 			--db-icon-after: attr(data-aid-icon-after);
 		}
 
-		@media screen and (prefers-reduced-motion: no-preference) {
+		@media screen and (p_refers-reduced-motion: no-p_reference) {
 			// Overwrite default transition for switch border
 			transition: none;
 		}
diff --git a/packages/components/src/components/tab-item/tab-item.lite.tsx b/packages/components/src/components/tab-item/tab-item.lite.tsx
index 5898f5309ab..fe4ca5d5b9a 100644
--- a/packages/components/src/components/tab-item/tab-item.lite.tsx
+++ b/packages/components/src/components/tab-item/tab-item.lite.tsx
@@ -2,6 +2,7 @@ import {
 	onMount,
 	onUpdate,
 	Show,
+	useDefaultProps,
 	useMetadata,
 	useRef,
 	useStore,
@@ -17,9 +18,10 @@ useMetadata({
 		nativeAttributes: ['disabled']
 	}
 });
+useDefaultProps<DBTabItemProps>({});
 
 export default function DBTabItem(props: DBTabItemProps) {
-	const ref = useRef<HTMLInputElement>(null);
+	const _ref = useRef<HTMLInputElement | null>(null);
 	// jscpd:ignore-start
 	const state = useStore<DBTabItemState>({
 		initialized: false,
@@ -58,11 +60,11 @@ export default function DBTabItem(props: DBTabItemProps) {
 	// jscpd:ignore-end
 
 	onUpdate(() => {
-		if (props.active && state.initialized && ref) {
-			ref.click();
+		if (props.active && state.initialized && _ref) {
+			_ref.click();
 			state.initialized = false;
 		}
-	}, [ref, state.initialized]);
+	}, [_ref, state.initialized]);
 
 	return (
 		<li class={cls('db-tab-item', props.className)} role="none">
@@ -78,7 +80,7 @@ export default function DBTabItem(props: DBTabItemProps) {
 					aria-selected={state._selected}
 					aria-controls={props.controls}
 					checked={props.checked}
-					ref={ref}
+					ref={_ref}
 					type="radio"
 					role="tab"
 					id={props.id}
diff --git a/packages/components/src/components/tab-list/tab-list.lite.tsx b/packages/components/src/components/tab-list/tab-list.lite.tsx
index 64ea3765844..b92fc96b4fc 100644
--- a/packages/components/src/components/tab-list/tab-list.lite.tsx
+++ b/packages/components/src/components/tab-list/tab-list.lite.tsx
@@ -1,13 +1,20 @@
-import { onMount, useMetadata, useRef, useStore } from '@builder.io/mitosis';
+import {
+	onMount,
+	useDefaultProps,
+	useMetadata,
+	useRef,
+	useStore
+} from '@builder.io/mitosis';
 import { DBTabListProps, DBTabListState } from './model';
 import { cls, uuid } from '../../utils';
 import { DEFAULT_ID } from '../../shared/constants';
 
 useMetadata({});
+useDefaultProps<DBTabListProps>({});
 
 export default function DBTabList(props: DBTabListProps) {
 	// This is used as forwardRef
-	const ref = useRef<HTMLDivElement>(null);
+	const _ref = useRef<HTMLDivElement | null>(null);
 	// jscpd:ignore-start
 	const state = useStore<DBTabListState>({
 		_id: DEFAULT_ID
@@ -20,7 +27,7 @@ export default function DBTabList(props: DBTabListProps) {
 
 	return (
 		<div
-			ref={ref}
+			ref={_ref}
 			id={state._id}
 			class={cls('db-tab-list', props.className)}>
 			<ul role="tablist">{props.children}</ul>
diff --git a/packages/components/src/components/tab-panel/tab-panel.lite.tsx b/packages/components/src/components/tab-panel/tab-panel.lite.tsx
index 31ccc9dc790..da6d20e5b63 100644
--- a/packages/components/src/components/tab-panel/tab-panel.lite.tsx
+++ b/packages/components/src/components/tab-panel/tab-panel.lite.tsx
@@ -1,6 +1,7 @@
 import {
 	onMount,
 	Show,
+	useDefaultProps,
 	useMetadata,
 	useRef,
 	useStore
@@ -9,10 +10,11 @@ import { DBTabPanelProps, DBTabPanelState } from './model';
 import { cls } from '../../utils';
 
 useMetadata({});
+useDefaultProps<DBTabPanelProps>({});
 
 export default function DBTabPanel(props: DBTabPanelProps) {
 	// This is used as forwardRef
-	const ref = useRef<HTMLDivElement>(null);
+	const _ref = useRef<HTMLDivElement | null>(null);
 	// jscpd:ignore-start
 	const state = useStore<DBTabPanelState>({});
 
@@ -21,7 +23,7 @@ export default function DBTabPanel(props: DBTabPanelProps) {
 
 	return (
 		<section
-			ref={ref}
+			ref={_ref}
 			class={cls('db-tab-panel', props.className)}
 			id={props.id}
 			role="tabpanel"
diff --git a/packages/components/src/components/tabs/index.html b/packages/components/src/components/tabs/index.html
index 39ca3df3aaa..c1ffdfb425a 100644
--- a/packages/components/src/components/tabs/index.html
+++ b/packages/components/src/components/tabs/index.html
@@ -7,7 +7,7 @@
 	</head>
 	<body style="padding: var(--db-spacing-fixed-md)">
 		<h2>Angular Example</h2>
-		<db-tabs ng-reflect-arrow-scroll-distance="75">
+		<db-tabs ng-_reflect-arrow-scroll-distance="75">
 			<div class="db-tabs">
 				<db-tab-list>
 					<div
@@ -17,8 +17,8 @@ <h2>Angular Example</h2>
 						aria-orientation="horizontal"
 					>
 						<db-tab
-							ng-reflect-name="functional"
-							ng-reflect-index="0"
+							ng-_reflect-name="functional"
+							ng-_reflect-index="0"
 						>
 							<label
 								role="tab"
@@ -36,8 +36,8 @@ <h2>Angular Example</h2>
 							>
 						</db-tab>
 						<db-tab
-							ng-reflect-name="functional"
-							ng-reflect-index="1"
+							ng-_reflect-name="functional"
+							ng-_reflect-index="1"
 						>
 							<label
 								role="tab"
@@ -56,8 +56,8 @@ <h2>Angular Example</h2>
 							</label>
 						</db-tab>
 						<db-tab
-							ng-reflect-name="functional"
-							ng-reflect-index="2"
+							ng-_reflect-name="functional"
+							ng-_reflect-index="2"
 						>
 							<label
 								role="tab"
@@ -77,7 +77,7 @@ <h2>Angular Example</h2>
 						</db-tab>
 					</div>
 				</db-tab-list>
-				<db-tab-panel ng-reflect-name="functional" ng-reflect-index="0">
+				<db-tab-panel ng-_reflect-name="functional" ng-_reflect-index="0">
 					<article
 						role="tabpanel"
 						class="db-tab-panel"
@@ -87,7 +87,7 @@ <h2>Angular Example</h2>
 						Tab Panel 1
 					</article>
 				</db-tab-panel>
-				<db-tab-panel ng-reflect-name="functional" ng-reflect-index="1">
+				<db-tab-panel ng-_reflect-name="functional" ng-_reflect-index="1">
 					<article
 						role="tabpanel"
 						class="db-tab-panel"
@@ -97,7 +97,7 @@ <h2>Angular Example</h2>
 						Tab Panel 2
 					</article>
 				</db-tab-panel>
-				<db-tab-panel ng-reflect-name="functional" ng-reflect-index="2">
+				<db-tab-panel ng-_reflect-name="functional" ng-_reflect-index="2">
 					<article
 						role="tabpanel"
 						class="db-tab-panel"
diff --git a/packages/components/src/components/tabs/tabs.lite.tsx b/packages/components/src/components/tabs/tabs.lite.tsx
index 77b7134c471..1270f4d1e51 100644
--- a/packages/components/src/components/tabs/tabs.lite.tsx
+++ b/packages/components/src/components/tabs/tabs.lite.tsx
@@ -3,6 +3,7 @@ import {
 	onMount,
 	onUpdate,
 	Show,
+	useDefaultProps,
 	useMetadata,
 	useRef,
 	useStore
@@ -15,9 +16,10 @@ import DBTabItem from '../tab-item/tab-item.lite';
 import DBTabPanel from '../tab-panel/tab-panel.lite';
 
 useMetadata({});
+useDefaultProps<DBTabsProps>({});
 
 export default function DBTabs(props: DBTabsProps) {
-	const ref = useRef<HTMLDivElement>(null);
+	const _ref = useRef<HTMLDivElement | null>(null);
 	// jscpd:ignore-start
 	const state = useStore<DBTabsState>({
 		_id: 'tabs-' + uuid(),
@@ -59,30 +61,32 @@ export default function DBTabs(props: DBTabsProps) {
 			});
 		},
 		initTabList() {
-			if (ref) {
-				const tabList = ref.querySelector('.db-tab-list');
+			if (_ref) {
+				const tabList = _ref.querySelector('.db-tab-list');
 				if (tabList) {
-					const container = tabList.querySelector('[role="tablist"]');
-
-					container.setAttribute(
-						'aria-orientation',
-						props.orientation || 'horizontal'
-					);
-
-					if (props.behaviour === 'arrows') {
-						state.scrollContainer = container;
-						state.evaluateScrollButtons(container);
-						container.addEventListener('scroll', () => {
+					const container: HTMLElement | null =
+						tabList.querySelector('[role="tablist"]');
+					if (container) {
+						container.setAttribute(
+							'aria-orientation',
+							props.orientation || 'horizontal'
+						);
+
+						if (props.behaviour === 'arrows') {
+							state.scrollContainer = container;
 							state.evaluateScrollButtons(container);
-						});
+							container.addEventListener('scroll', () => {
+								state.evaluateScrollButtons(container);
+							});
+						}
 					}
 				}
 			}
 		},
 		initTabs(init?: boolean) {
-			if (ref) {
+			if (_ref) {
 				const tabItems = Array.from<Element>(
-					ref.getElementsByClassName('db-tab-item')
+					_ref.getElementsByClassName('db-tab-item')
 				);
 				for (const tabItem of tabItems) {
 					const index: number = tabItems.indexOf(tabItem);
@@ -118,7 +122,7 @@ export default function DBTabs(props: DBTabsProps) {
 				}
 
 				const tabPanels = Array.from<Element>(
-					ref.querySelectorAll(
+					_ref.querySelectorAll(
 						':is(:scope > .db-tab-panel, :scope > db-tab-panel > .db-tab-panel)'
 					)
 				);
@@ -145,11 +149,11 @@ export default function DBTabs(props: DBTabsProps) {
 	// jscpd:ignore-end
 
 	onUpdate(() => {
-		if (ref && state.initialized) {
+		if (_ref && state.initialized) {
 			state.initTabList();
 			state.initTabs(true);
 
-			const tabList = ref.querySelector('.db-tab-list');
+			const tabList = _ref.querySelector('.db-tab-list');
 			if (tabList) {
 				const observer = new MutationObserver((mutations) => {
 					mutations.forEach((mutation) => {
@@ -171,11 +175,11 @@ export default function DBTabs(props: DBTabsProps) {
 
 			state.initialized = false;
 		}
-	}, [ref, state.initialized]);
+	}, [_ref, state.initialized]);
 
 	return (
 		<div
-			ref={ref}
+			ref={_ref}
 			id={state._id}
 			class={cls('db-tabs', props.className)}
 			data-orientation={props.orientation}
diff --git a/packages/components/src/components/tag/tag.lite.tsx b/packages/components/src/components/tag/tag.lite.tsx
index fc70cf40362..b0495d84a38 100644
--- a/packages/components/src/components/tag/tag.lite.tsx
+++ b/packages/components/src/components/tag/tag.lite.tsx
@@ -2,6 +2,7 @@ import {
 	onInit,
 	onUpdate,
 	Show,
+	useDefaultProps,
 	useMetadata,
 	useRef,
 	useStore
@@ -10,9 +11,10 @@ import { DBTagProps, DBTagState } from './model';
 import { cls, getBooleanAsString, getHideProp } from '../../utils';
 
 useMetadata({});
+useDefaultProps<DBTagProps>({});
 
 export default function DBTag(props: DBTagProps) {
-	const ref = useRef<HTMLDivElement>(null);
+	const _ref = useRef<HTMLDivElement | null>(null);
 	const state = useStore<DBTagState>({
 		initialized: false,
 		handleRemove: () => {
@@ -35,22 +37,22 @@ export default function DBTag(props: DBTagProps) {
 	});
 
 	onUpdate(() => {
-		if (state.initialized && ref && props.disabled !== undefined) {
-			const button: HTMLButtonElement = ref?.querySelector(
+		if (state.initialized && _ref && props.disabled !== undefined) {
+			const button: HTMLButtonElement | null = _ref?.querySelector(
 				'button:not(.db-tab-remove-button)'
 			);
-			const input: HTMLInputElement = ref?.querySelector('input');
+			const input: HTMLInputElement | null = _ref?.querySelector('input');
 			for (const element of [button, input]) {
 				if (element) {
 					element.disabled = props.disabled;
 				}
 			}
 		}
-	}, [state.initialized, props.disabled, ref]);
+	}, [state.initialized, props.disabled, _ref]);
 
 	return (
 		<div
-			ref={ref}
+			ref={_ref}
 			id={props.id}
 			class={cls('db-tag', props.className)}
 			data-disabled={getBooleanAsString(props.disabled)}
diff --git a/packages/components/src/components/textarea/docs/Vue.md b/packages/components/src/components/textarea/docs/Vue.md
index 92de6634ce8..ba40f020708 100644
--- a/packages/components/src/components/textarea/docs/Vue.md
+++ b/packages/components/src/components/textarea/docs/Vue.md
@@ -5,17 +5,17 @@ For general installation and configuration look at the [v-components](https://ww
 ### General
 
 You cannot use a default value for [textarea in vue](https://vuejs.org/guide/essentials/forms.html#multiline-text).
-Use `v-model:value` or `:value` instead with a `ref("My default value")`.
+Use `v-model:value` or `:value` instead with a `_ref("My default value")`.
 
 ### Use component
 
 ```vue App.vue
 <!-- App.vue -->
 <script setup lang="ts">
-import { ref } from "vue";
+import { _ref } from "vue";
 import { DBTextarea } from "@db-ui/v-components";
 
-const textarea = ref("default value");
+const textarea = _ref("default value");
 </script>
 
 <template>
diff --git a/packages/components/src/components/textarea/textarea.lite.tsx b/packages/components/src/components/textarea/textarea.lite.tsx
index d949d9bafcf..ef6d6034bcc 100644
--- a/packages/components/src/components/textarea/textarea.lite.tsx
+++ b/packages/components/src/components/textarea/textarea.lite.tsx
@@ -2,6 +2,7 @@ import {
 	onMount,
 	onUpdate,
 	Show,
+	useDefaultProps,
 	useMetadata,
 	useRef,
 	useStore,
@@ -13,8 +14,8 @@ import {
 	cls,
 	delay,
 	getHideProp,
-	stringPropVisible,
 	hasVoiceOver,
+	stringPropVisible,
 	uuid
 } from '../../utils';
 import {
@@ -35,9 +36,10 @@ useMetadata({
 		nativeAttributes: ['disabled', 'required']
 	}
 });
+useDefaultProps<DBTextareaProps>({});
 
 export default function DBTextarea(props: DBTextareaProps) {
-	const ref = useRef<HTMLTextAreaElement>(null);
+	const _ref = useRef<HTMLTextAreaElement | null>(null);
 	// jscpd:ignore-start
 	const state = useStore<DBTextareaState>({
 		_id: undefined,
@@ -71,18 +73,18 @@ export default function DBTextarea(props: DBTextareaProps) {
 			});
 
 			/* For a11y reasons we need to map the correct message with the textarea */
-			if (!ref?.validity.valid || props.validation === 'invalid') {
+			if (!_ref?.validity.valid || props.validation === 'invalid') {
 				state._descByIds = state._invalidMessageId;
 				if (hasVoiceOver()) {
 					state._voiceOverFallback =
 						props.invalidMessage ??
-						ref?.validationMessage ??
+						_ref?.validationMessage ??
 						DEFAULT_INVALID_MESSAGE;
 					delay(() => (state._voiceOverFallback = ''), 1000);
 				}
 			} else if (
 				props.validation === 'valid' ||
-				(ref?.validity.valid &&
+				(_ref?.validity.valid &&
 					(props.required || props.minLength || props.maxLength))
 			) {
 				state._descByIds = state._validMessageId;
@@ -153,7 +155,7 @@ export default function DBTextarea(props: DBTextareaProps) {
 			<textarea
 				aria-invalid={props.validation === 'invalid'}
 				data-custom-validity={props.validation}
-				ref={ref}
+				ref={_ref}
 				id={state._id}
 				data-resize={props.resize}
 				disabled={props.disabled}
@@ -206,7 +208,7 @@ export default function DBTextarea(props: DBTextareaProps) {
 				size="small"
 				semantic="critical">
 				{props.invalidMessage ??
-					ref?.validationMessage ??
+					_ref?.validationMessage ??
 					DEFAULT_INVALID_MESSAGE}
 			</DBInfotext>
 
diff --git a/packages/components/src/components/tooltip/tooltip.lite.tsx b/packages/components/src/components/tooltip/tooltip.lite.tsx
index 21a4177a3fc..42633674c91 100644
--- a/packages/components/src/components/tooltip/tooltip.lite.tsx
+++ b/packages/components/src/components/tooltip/tooltip.lite.tsx
@@ -1,6 +1,7 @@
 import {
 	onMount,
 	onUpdate,
+	useDefaultProps,
 	useMetadata,
 	useRef,
 	useStore
@@ -11,9 +12,10 @@ import { ClickEvent } from '../../shared/model';
 import { DEFAULT_ID } from '../../shared/constants';
 
 useMetadata({});
+useDefaultProps<DBTooltipProps>({});
 
 export default function DBTooltip(props: DBTooltipProps) {
-	const ref = useRef<HTMLDivElement>(null);
+	const _ref = useRef<HTMLDivElement | null>(null);
 	// jscpd:ignore-start
 	const state = useStore<DBTooltipState>({
 		_id: DEFAULT_ID,
@@ -22,7 +24,7 @@ export default function DBTooltip(props: DBTooltipProps) {
 			event.stopPropagation();
 		},
 		handleAutoPlacement: () => {
-			if (ref) handleDataOutside(ref);
+			if (_ref) handleDataOutside(_ref);
 		}
 	});
 
@@ -32,8 +34,8 @@ export default function DBTooltip(props: DBTooltipProps) {
 	});
 
 	onUpdate(() => {
-		if (ref && state.initialized) {
-			let parent = ref.parentElement;
+		if (_ref && state.initialized) {
+			let parent = _ref.parentElement;
 
 			if (parent && parent.localName.includes('tooltip')) {
 				// Angular workaround
@@ -47,12 +49,12 @@ export default function DBTooltip(props: DBTooltipProps) {
 					);
 				});
 				parent.setAttribute('data-has-tooltip', 'true');
-				parent.setAttribute('aria-describedby', state._id);
+				parent.setAttribute('aria-describedby', state._id || '');
 			}
 
 			state.initialized = false;
 		}
-	}, [ref, state.initialized]);
+	}, [_ref, state.initialized]);
 
 	// jscpd:ignore-end
 
@@ -61,7 +63,7 @@ export default function DBTooltip(props: DBTooltipProps) {
 		<i
 			role="tooltip"
 			aria-hidden="true"
-			ref={ref}
+			ref={_ref}
 			class={cls('db-tooltip', props.className)}
 			id={state._id}
 			data-emphasis={props.emphasis}
diff --git a/packages/components/src/utils/form-components.ts b/packages/components/src/utils/form-components.ts
index a8fcb1b722e..82e09d15f44 100644
--- a/packages/components/src/utils/form-components.ts
+++ b/packages/components/src/utils/form-components.ts
@@ -4,7 +4,7 @@ export const handleFrameworkEvent = (
 	modelValue: string = 'value'
 ): void => {
 	// TODO: Replace this with the solution out of https://github.com/BuilderIO/mitosis/issues/833 after this has been "solved"
-	// VUE:component.$emit(`update:${modelValue}`, event.target[modelValue]);
+	// VUE:component.emit(`update:${modelValue}`, event.target[modelValue]);
 	// Change event to work with reactive and template driven forms
 	// ANGULAR: component.propagateChange(event.target[modelValue]);
 	// ANGULAR: component.writeValue(event.target[modelValue]);
diff --git a/packages/components/src/utils/navigation.ts b/packages/components/src/utils/navigation.ts
index dc7ad33c27b..66edfd8dab7 100644
--- a/packages/components/src/utils/navigation.ts
+++ b/packages/components/src/utils/navigation.ts
@@ -18,17 +18,22 @@ export const isEventTargetNavigationItem = (event: unknown): boolean => {
 };
 
 export class NavigationItemSafeTriangle {
-	private readonly element: HTMLElement;
-	private readonly subNavigation: Element;
+	private readonly element: HTMLElement | null;
+	private readonly subNavigation: Element | null;
 	private readonly parentSubNavigation: Element | null;
 	private triangleData?: TriangleData;
 	private initialized: boolean = false;
 	private mouseX: number = 0;
 	private mouseY: number = 0;
-	constructor(element: HTMLElement, subNavigation: Element) {
+	constructor(element: HTMLElement | null, subNavigation: Element | null) {
 		this.element = element;
 		this.subNavigation = subNavigation;
-		this.parentSubNavigation = this.element.closest('.db-sub-navigation');
+
+		if (!this.element || !this.subNavigation) {
+			return;
+		}
+
+		this.parentSubNavigation = this.element?.closest('.db-sub-navigation');
 
 		/*
 		 * only initiate if:
@@ -46,7 +51,7 @@ export class NavigationItemSafeTriangle {
 
 		// the triangle has the width of the sub-navigation, current nav-item can be wider.
 		// so the width of the triangle must be adapted to a possibly wider nav-item.
-		this.element.style.setProperty(
+		this.element?.style.setProperty(
 			'--db-navigation-item-inline-size',
 			`${parentElementWidth}px`
 		);
@@ -55,7 +60,12 @@ export class NavigationItemSafeTriangle {
 	}
 
 	public enableFollow() {
-		if (!this.initialized || this.triangleData) {
+		if (
+			!this.initialized ||
+			this.triangleData ||
+			!this.element ||
+			!this.subNavigation
+		) {
 			return;
 		}
 
@@ -180,7 +190,12 @@ export class NavigationItemSafeTriangle {
 	}
 
 	public followByMouseEvent(event: MouseEvent) {
-		if (!this.initialized || !this.triangleData) {
+		if (
+			!this.initialized ||
+			!this.triangleData ||
+			!this.element ||
+			!this.subNavigation
+		) {
 			return;
 		}
 
diff --git a/showcases/vue-showcase/src/components/DefaultComponent.vue b/showcases/vue-showcase/src/components/DefaultComponent.vue
index 66e3f2652f9..181d7f088c9 100644
--- a/showcases/vue-showcase/src/components/DefaultComponent.vue
+++ b/showcases/vue-showcase/src/components/DefaultComponent.vue
@@ -112,7 +112,7 @@ const getElevation = (): "1" | "2" | "3" =>
 	<!-- TODO: Slots not working for nested components? -> Had to copy paste variant-cards...	-->
 	<DBCard
 		v-if="variantRef"
-		class="variants-card"
+		className="variants-card"
 		:elevation-level="getElevation()"
 	>
 		<div
@@ -141,7 +141,7 @@ const getElevation = (): "1" | "2" | "3" =>
 		<div v-for="(variant, variantIndex) in variants">
 			<DBDivider></DBDivider>
 			<DBLink
-				class="link-headline"
+				className="link-headline"
 				content="external"
 				target="_blank"
 				:href="getLink(variant.name)"
@@ -149,7 +149,7 @@ const getElevation = (): "1" | "2" | "3" =>
 			>
 				{{ variant.name }}
 			</DBLink>
-			<DBCard class="variants-card" :elevation-level="getElevation()">
+			<DBCard className="variants-card" :elevation-level="getElevation()">
 				<div
 					:role="variant.role"
 					:aria-label="variant.role ? variant?.name : undefined"

From 7b8edf48023b17866339075d6b5b9f53e659d57c Mon Sep 17 00:00:00 2001
From: Nicolas Merget <nicolas.merget@deutschebahn.com>
Date: Wed, 15 Jan 2025 08:11:00 +0100
Subject: [PATCH 02/10] fix: issue with wrong search&replace

---
 .../accordion-item/accordion-item.scss        |  2 +-
 .../src/components/drawer/drawer.scss         | 54 ++++++++++++++++++-
 .../src/components/input/input.scss           |  2 +-
 .../navigation-item/navigation-item.scss      | 11 +++-
 .../navigation/docs/Accessibility.md          |  2 +-
 .../src/components/navigation/navigation.scss |  2 +-
 .../components/src/components/page/page.scss  |  8 ++-
 .../src/components/radio/radio.scss           |  2 +-
 .../src/components/switch/switch.scss         |  4 +-
 9 files changed, 75 insertions(+), 12 deletions(-)

diff --git a/packages/components/src/components/accordion-item/accordion-item.scss b/packages/components/src/components/accordion-item/accordion-item.scss
index 0cdab82a93d..5e8e18f0087 100644
--- a/packages/components/src/components/accordion-item/accordion-item.scss
+++ b/packages/components/src/components/accordion-item/accordion-item.scss
@@ -16,7 +16,7 @@ $db-accordion-item-border-radius: variables.$db-border-radius-sm;
 	> details {
 		&[open] {
 			summary + div {
-				@media screen and (p_refers-reduced-motion: no-p_reference) {
+				@media screen and (prefers-reduced-motion: no-preference) {
 					animation: accordion-open
 						#{variables.$db-transition-straight-emotional} normal
 						both;
diff --git a/packages/components/src/components/drawer/drawer.scss b/packages/components/src/components/drawer/drawer.scss
index 00f603d08d1..b61e3517de9 100644
--- a/packages/components/src/components/drawer/drawer.scss
+++ b/packages/components/src/components/drawer/drawer.scss
@@ -174,23 +174,48 @@ $spacings: (
 
 	&[open] {
 		.db-drawer-container {
-			@media screen and (p_refers-reduced-motion: no-p_reference) {
+			@media screen and (prefers-reduced-motion: no-preference) {
+				@media screen and (prefers-reduced-motion: reduce) {
+					&:not([data-direction]),
+					&[data-direction="right"] {
+						animation: none;
+					}
+				}
+
 				&:not([data-direction]),
 				&[data-direction="right"] {
 					animation: show-right-to-left
 						#{variables.$db-transition-straight-show};
 				}
 
+				@media screen and (prefers-reduced-motion: reduce) {
+					&[data-direction="left"] {
+						animation: none;
+					}
+				}
+
 				&[data-direction="left"] {
 					animation: show-left-to-right
 						#{variables.$db-transition-straight-show};
 				}
 
+				@media screen and (prefers-reduced-motion: reduce) {
+					&[data-direction="up"] {
+						animation: none;
+					}
+				}
+
 				&[data-direction="up"] {
 					animation: show-bottom-to-top
 						#{variables.$db-transition-straight-show};
 				}
 
+				@media screen and (prefers-reduced-motion: reduce) {
+					&[data-direction="down"] {
+						animation: none;
+					}
+				}
+
 				&[data-direction="down"] {
 					animation: show-top-to-bottom
 						#{variables.$db-transition-straight-show};
@@ -198,23 +223,48 @@ $spacings: (
 			}
 
 			&[hidden] {
-				@media screen and (p_refers-reduced-motion: no-p_reference) {
+				@media screen and (prefers-reduced-motion: no-preference) {
+					@media screen and (prefers-reduced-motion: reduce) {
+						&:not([data-direction]),
+						&[data-direction="right"] {
+							animation: none;
+						}
+					}
+
 					&:not([data-direction]),
 					&[data-direction="right"] {
 						animation: hide-right-to-left
 							#{variables.$db-transition-straight-hide};
 					}
 
+					@media screen and (prefers-reduced-motion: reduce) {
+						&[data-direction="left"] {
+							animation: none;
+						}
+					}
+
 					&[data-direction="left"] {
 						animation: hide-left-to-right
 							#{variables.$db-transition-straight-hide};
 					}
 
+					@media screen and (prefers-reduced-motion: reduce) {
+						&[data-direction="up"] {
+							animation: none;
+						}
+					}
+
 					&[data-direction="up"] {
 						animation: hide-bottom-to-top
 							#{variables.$db-transition-straight-hide};
 					}
 
+					@media screen and (prefers-reduced-motion: reduce) {
+						&[data-direction="down"] {
+							animation: none;
+						}
+					}
+
 					&[data-direction="down"] {
 						animation: hide-top-to-bottom
 							#{variables.$db-transition-straight-hide};
diff --git a/packages/components/src/components/input/input.scss b/packages/components/src/components/input/input.scss
index 1d6002bed36..b35ad4a8f0e 100644
--- a/packages/components/src/components/input/input.scss
+++ b/packages/components/src/components/input/input.scss
@@ -39,7 +39,7 @@ $icon-padding: calc(
 		&::after {
 			opacity: 0;
 
-			@media screen and (p_refers-reduced-motion: no-p_reference) {
+			@media screen and (prefers-reduced-motion: no-preference) {
 				transition: opacity variables.$db-transition-duration-fast;
 			}
 		}
diff --git a/packages/components/src/components/navigation-item/navigation-item.scss b/packages/components/src/components/navigation-item/navigation-item.scss
index 1a3e1da7a24..9d9ce70e03c 100644
--- a/packages/components/src/components/navigation-item/navigation-item.scss
+++ b/packages/components/src/components/navigation-item/navigation-item.scss
@@ -23,7 +23,7 @@
 	// show/hide sub-navigation by click
 	&[aria-expanded="true"] {
 		~ .db-sub-navigation {
-			@media screen and (p_refers-reduced-motion: no-p_reference) {
+			@media screen and (prefers-reduced-motion: no-preference) {
 				transition: visibility 0ms linear 0ms;
 				animation: show-right-to-left
 					#{variables.$db-transition-straight-show};
@@ -38,7 +38,14 @@
 	}
 
 	&:not(&[aria-expanded="true"]) {
-		@media screen and (p_refers-reduced-motion: no-p_reference) {
+		@media screen and (prefers-reduced-motion: no-preference) {
+			@media screen and (prefers-reduced-motion: reduce) {
+				~ .db-sub-navigation {
+					transition: none; // hide animation is 0.4s
+					animation: none;
+				}
+			}
+
 			~ .db-sub-navigation {
 				transition: visibility 0ms linear 410ms; // hide animation is 0.4s
 				animation: hide-right-to-left
diff --git a/packages/components/src/components/navigation/docs/Accessibility.md b/packages/components/src/components/navigation/docs/Accessibility.md
index 93f9a1346f4..3754246965d 100644
--- a/packages/components/src/components/navigation/docs/Accessibility.md
+++ b/packages/components/src/components/navigation/docs/Accessibility.md
@@ -3,7 +3,7 @@
 ### Active item / current page
 
 To implicitly set a `NavigationItem` to **active**, the attribute `aria-current="page"` is applied to the contained anchor.
-Some frameworks (vue, angular) offer internal, automatic solutions for this. These should p_referably be used.
+Some frameworks (vue, angular) offer internal, automatic solutions for this. These should preferably be used.
 
 This leads to:
 
diff --git a/packages/components/src/components/navigation/navigation.scss b/packages/components/src/components/navigation/navigation.scss
index 90d2c092154..f960165c599 100644
--- a/packages/components/src/components/navigation/navigation.scss
+++ b/packages/components/src/components/navigation/navigation.scss
@@ -35,7 +35,7 @@
 						--db-icon-margin-start: #{variables.$db-spacing-fixed-sm};
 						--db-icon-after: "chevron_down";
 
-						@media screen and (p_refers-reduced-motion: no-p_reference) {
+						@media screen and (prefers-reduced-motion: no-preference) {
 							transition: form-components.$dropdown-icon-transition;
 						}
 					}
diff --git a/packages/components/src/components/page/page.scss b/packages/components/src/components/page/page.scss
index b7d9b902ae4..01943ba123c 100644
--- a/packages/components/src/components/page/page.scss
+++ b/packages/components/src/components/page/page.scss
@@ -17,7 +17,13 @@
 .db-page {
 	opacity: 0;
 
-	@media screen and (p_refers-reduced-motion: no-p_reference) {
+	@media screen and (prefers-reduced-motion: no-preference) {
+		@media screen and (prefers-reduced-motion: reduce) {
+			&[data-fade-in="true"] {
+				transition: none;
+			}
+		}
+
 		&[data-fade-in="true"] {
 			transition: opacity variables.$db-transition-straight-emotional;
 		}
diff --git a/packages/components/src/components/radio/radio.scss b/packages/components/src/components/radio/radio.scss
index 2da0e81180c..e02a5351699 100644
--- a/packages/components/src/components/radio/radio.scss
+++ b/packages/components/src/components/radio/radio.scss
@@ -9,7 +9,7 @@
 		border-color: currentcolor;
 		border-radius: variables.$db-border-radius-full;
 
-		@media screen and (p_refers-reduced-motion: no-p_reference) {
+		@media screen and (prefers-reduced-motion: no-preference) {
 			transition: border-width variables.$db-transition-duration-fast
 				variables.$db-transition-timing-functional;
 		}
diff --git a/packages/components/src/components/switch/switch.scss b/packages/components/src/components/switch/switch.scss
index 2f475d9792e..4027a9841a8 100644
--- a/packages/components/src/components/switch/switch.scss
+++ b/packages/components/src/components/switch/switch.scss
@@ -86,7 +86,7 @@ $checked-active-transition-size: calc(
 				#{$switch-active-thumb-size} - #{$switch-inactive-thumb-size}
 			);
 
-			@media screen and (p_refers-reduced-motion: no-p_reference) {
+			@media screen and (prefers-reduced-motion: no-preference) {
 				transition:
 					margin variables.$db-transition-duration-fast
 						variables.$db-transition-timing-emotional,
@@ -141,7 +141,7 @@ $checked-active-transition-size: calc(
 			--db-icon-after: attr(data-aid-icon-after);
 		}
 
-		@media screen and (p_refers-reduced-motion: no-p_reference) {
+		@media screen and (prefers-reduced-motion: no-preference) {
 			// Overwrite default transition for switch border
 			transition: none;
 		}

From d526f20c494e824786bc5068b0cdcaff39bc59fa Mon Sep 17 00:00:00 2001
From: Nicolas Merget <nicolas.merget@deutschebahn.com>
Date: Wed, 15 Jan 2025 10:22:58 +0100
Subject: [PATCH 03/10] fix: issue with showcases

---
 packages/components/scripts/post-build/angular.ts    |  8 ++------
 packages/components/scripts/post-build/react.ts      | 12 ++----------
 packages/components/scripts/post-build/stencil.ts    |  2 +-
 .../components/src/components/drawer/drawer.lite.tsx |  6 ++----
 packages/components/src/utils/navigation.ts          |  2 +-
 5 files changed, 8 insertions(+), 22 deletions(-)

diff --git a/packages/components/scripts/post-build/angular.ts b/packages/components/scripts/post-build/angular.ts
index 65d5771c26f..292893818d2 100644
--- a/packages/components/scripts/post-build/angular.ts
+++ b/packages/components/scripts/post-build/angular.ts
@@ -79,8 +79,8 @@ const setControlValueAccessorReplacements = (
 		writeValue(value: any) {
 		  this.${valueAccessor} = value;
 
-		  if (this.ref?.nativeElement) {
-			 this.renderer.setProperty(this.ref?.nativeElement, '${valueAccessor}', value);
+		  if (this._ref?.nativeElement) {
+			 this.renderer.setProperty(this._ref?.nativeElement, '${valueAccessor}', value);
 		  }
 		}
 
@@ -213,10 +213,6 @@ export default (tmp?: boolean) => {
 			{
 				from: '} from "../../utils"',
 				to: ', enableCustomElementAttributePassing } from "../../utils"'
-			},
-			{
-				from: /this.ref.nativeElement/g,
-				to: 'this.ref?.nativeElement'
 			}
 		];
 
diff --git a/packages/components/scripts/post-build/react.ts b/packages/components/scripts/post-build/react.ts
index af7642d9906..b9ec489bf41 100644
--- a/packages/components/scripts/post-build/react.ts
+++ b/packages/components/scripts/post-build/react.ts
@@ -81,16 +81,8 @@ export default (tmp?: boolean) => {
 					to: `function DB${upperComponentName}Fn(props: Omit<HTMLAttributes<${htmlElement}>, keyof DB${upperComponentName}Props> & DB${upperComponentName}Props, component: any) {`
 				},
 				{
-					from: `export default DB${upperComponentName};`,
-					to: `const DB${upperComponentName} = forwardRef<${htmlElement}, Omit<HTMLAttributes<${htmlElement}>, keyof DB${upperComponentName}Props> & DB${upperComponentName}Props>(DB${upperComponentName}Fn);\nexport default DB${upperComponentName};`
-				},
-				{
-					from: 'if (ref.current)',
-					to: 'if (ref?.current)'
-				},
-				{
-					from: '[ref.current]',
-					to: '[ref]'
+					from: `DB${upperComponentName}.defaultProps`,
+					to: `const DB${upperComponentName} = forwardRef<${htmlElement}, Omit<HTMLAttributes<${htmlElement}>, keyof DB${upperComponentName}Props> & DB${upperComponentName}Props>(DB${upperComponentName}Fn);\nDB${upperComponentName}.defaultProps`
 				},
 				{
 					from: '>(null);',
diff --git a/packages/components/scripts/post-build/stencil.ts b/packages/components/scripts/post-build/stencil.ts
index 933bf95dd6f..64ee4994765 100644
--- a/packages/components/scripts/post-build/stencil.ts
+++ b/packages/components/scripts/post-build/stencil.ts
@@ -5,7 +5,7 @@ import { writeFileSync, existsSync } from 'node:fs';
 
 const enableCustomElementsAttributePassing = (componentName: string) =>
 	'componentDidLoad() {\n' +
-	`\tenableCustomElementAttributePassing(this.ref, "db-${componentName}")`;
+	`\tenableCustomElementAttributePassing(this._ref, "db-${componentName}")`;
 
 const getSlotDocs = (foundSlots: string[]): string => {
 	return `
diff --git a/packages/components/src/components/drawer/drawer.lite.tsx b/packages/components/src/components/drawer/drawer.lite.tsx
index 2824f3d1a7c..8f5065c03dc 100644
--- a/packages/components/src/components/drawer/drawer.lite.tsx
+++ b/packages/components/src/components/drawer/drawer.lite.tsx
@@ -14,9 +14,7 @@ import { cls, delay } from '../../utils';
 
 useMetadata({});
 
-useDefaultProps<DBDrawerProps>({
-	closeButtonText: DEFAULT_CLOSE_BUTTON
-});
+useDefaultProps<DBDrawerProps>({});
 
 export default function DBDrawer(props: DBDrawerProps) {
 	const _ref = useRef<HTMLDialogElement | null>(null);
@@ -107,7 +105,7 @@ export default function DBDrawer(props: DBDrawerProps) {
 						variant="ghost"
 						noText
 						onClick={() => state.handleClose('close')}>
-						{props.closeButtonText}
+						{props.closeButtonText ?? DEFAULT_CLOSE_BUTTON}
 					</DBButton>
 				</header>
 				<div class="db-drawer-content">{props.children}</div>
diff --git a/packages/components/src/utils/navigation.ts b/packages/components/src/utils/navigation.ts
index 66edfd8dab7..867cb51a119 100644
--- a/packages/components/src/utils/navigation.ts
+++ b/packages/components/src/utils/navigation.ts
@@ -20,7 +20,7 @@ export const isEventTargetNavigationItem = (event: unknown): boolean => {
 export class NavigationItemSafeTriangle {
 	private readonly element: HTMLElement | null;
 	private readonly subNavigation: Element | null;
-	private readonly parentSubNavigation: Element | null;
+	private readonly parentSubNavigation: Element | null = null;
 	private triangleData?: TriangleData;
 	private initialized: boolean = false;
 	private mouseX: number = 0;

From 6779339417b887034b0e1632ae2009c96e9d47b8 Mon Sep 17 00:00:00 2001
From: Nicolas Merget <nicolas.merget@deutschebahn.com>
Date: Wed, 15 Jan 2025 11:49:59 +0100
Subject: [PATCH 04/10] fix: issue react and angular _ref

---
 packages/components/scripts/post-build/angular.ts | 6 +++---
 packages/components/scripts/post-build/react.ts   | 4 ++--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/components/scripts/post-build/angular.ts b/packages/components/scripts/post-build/angular.ts
index 292893818d2..c0e6e40f923 100644
--- a/packages/components/scripts/post-build/angular.ts
+++ b/packages/components/scripts/post-build/angular.ts
@@ -175,7 +175,7 @@ export class ${directive.name}Directive {}
 
 const getAttributePassing = (componentName: string) => `
 ngAfterViewInit(): void {
-\t\tconst element: HTMLElement | null = this.ref?.nativeElement;
+\t\tconst element: HTMLElement | null = this._ref?.nativeElement;
 \t\tenableCustomElementAttributePassing(element,'db-${componentName}')
 \t}`;
 
@@ -205,9 +205,9 @@ export default (tmp?: boolean) => {
 				to: 'ngAfterContentChecked'
 			},
 			{
-				from: '@ViewChild("ref") ref!: ElementRef | undefined;',
+				from: '@ViewChild("_ref") _ref!: ElementRef | undefined;',
 				to:
-					'@ViewChild("ref") ref!: ElementRef | undefined;' +
+					'@ViewChild("_ref") _ref!: ElementRef | undefined;' +
 					getAttributePassing(component.name)
 			},
 			{
diff --git a/packages/components/scripts/post-build/react.ts b/packages/components/scripts/post-build/react.ts
index b9ec489bf41..2a5efd97de0 100644
--- a/packages/components/scripts/post-build/react.ts
+++ b/packages/components/scripts/post-build/react.ts
@@ -98,9 +98,9 @@ export default (tmp?: boolean) => {
 					to: ', filterPassingProps, getRootProps } from "../../utils"'
 				},
 				{
-					from: 'ref={ref}',
+					from: 'ref={_ref}',
 					to:
-						'ref={ref}\n' +
+						'ref={_ref}\n' +
 						`{...filterPassingProps(props,${JSON.stringify([
 							...rootProps,
 							...(component?.config?.react?.propsPassingFilter ??

From 83e2be60ea88226a6ffbd9cac0a34598d8396f35 Mon Sep 17 00:00:00 2001
From: Nicolas Merget <nicolas.merget@deutschebahn.com>
Date: Wed, 15 Jan 2025 13:20:48 +0100
Subject: [PATCH 05/10] fix: issue with class for DBSection

---
 showcases/vue-showcase/src/components/section/Section.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/showcases/vue-showcase/src/components/section/Section.vue b/showcases/vue-showcase/src/components/section/Section.vue
index 23e77eb9844..0183ef6fb1d 100644
--- a/showcases/vue-showcase/src/components/section/Section.vue
+++ b/showcases/vue-showcase/src/components/section/Section.vue
@@ -10,7 +10,7 @@ import { DBSection, DBCard } from "../../../../../output/vue/src";
 			#example="{ exampleIndex, variantIndex, exampleName, exampleProps }"
 		>
 			<DBSection
-				class="db-informational-bg-basic-level-2 section-card-container"
+				className="db-informational-bg-basic-level-2 section-card-container"
 				:spacing="exampleProps?.spacing"
 				:width="exampleProps?.width"
 			>

From ff370edaafdcfa2acb6172ea17bc24eb2f1ff3ba Mon Sep 17 00:00:00 2001
From: Nicolas Merget <nicolas.merget@deutschebahn.com>
Date: Thu, 16 Jan 2025 08:00:57 +0100
Subject: [PATCH 06/10] fix: issues with v-model

---
 .../mitosis/new/component/tsx.ejs.t           |  6 +++---
 .../components/scripts/post-build/angular.ts  |  6 ------
 packages/components/scripts/post-build/vue.ts | 19 +++++++++++++------
 .../src/components/checkbox/checkbox.lite.tsx | 10 +++++++---
 .../src/components/input/input.lite.tsx       |  9 ++++++---
 .../src/components/radio/radio.lite.tsx       | 10 +++++++---
 .../src/components/select/select.lite.tsx     |  9 ++++++---
 .../src/components/switch/switch.lite.tsx     | 10 +++++++---
 .../src/components/tab-item/tab-item.lite.tsx | 10 +++++++---
 .../src/components/textarea/textarea.lite.tsx |  9 ++++++---
 .../components/src/utils/form-components.ts   | 18 ++++++++++++------
 11 files changed, 74 insertions(+), 42 deletions(-)

diff --git a/packages/components/_templates/mitosis/new/component/tsx.ejs.t b/packages/components/_templates/mitosis/new/component/tsx.ejs.t
index c2faf8a2ebe..8380efefcbc 100644
--- a/packages/components/_templates/mitosis/new/component/tsx.ejs.t
+++ b/packages/components/_templates/mitosis/new/component/tsx.ejs.t
@@ -6,7 +6,7 @@ import { DB<%= h.changeCase.pascal(name) %>State, DB<%= h.changeCase.pascal(name
 import { cls } from "../../utils";
 <% if(formValue!=="no"){   -%>
 import {ChangeEvent, InteractionEvent} from "../../shared/model";
-import { handleFrameworkEvent } from "../../utils/form-components";
+import { handleFrameworkEventAngular, handleFrameworkEventVue } from "../../utils/form-components";
 <% } -%>
 
 useMetadata({});
@@ -29,8 +29,8 @@ export default function DB<%= h.changeCase.pascal(name) %>(props: DB<%= h.change
 			}
 
 			useTarget({
-				angular: () => handleFrameworkEvent(this, event, <%= formValue %>),
-				vue: () => handleFrameworkEvent(this, event, <%= formValue %>)
+				angular: () => handleFrameworkEventAngular(this, event, <%= formValue %>),
+				vue: () => handleFrameworkEventVue(this, event, <%= formValue %>)
 			});
 		},
 		handleBlur: (event: InteractionEvent<HTMLInputElement>) => {
diff --git a/packages/components/scripts/post-build/angular.ts b/packages/components/scripts/post-build/angular.ts
index c0e6e40f923..ad02f47273d 100644
--- a/packages/components/scripts/post-build/angular.ts
+++ b/packages/components/scripts/post-build/angular.ts
@@ -181,12 +181,6 @@ ngAfterViewInit(): void {
 
 export default (tmp?: boolean) => {
 	const outputFolder = `${tmp ? 'output/tmp' : 'output'}`;
-	// Activate vue specific event handling
-	replaceInFileSync({
-		files: `../../${outputFolder}/angular/src/utils/form-components.ts`,
-		from: /\/\/ ANGULAR:/g,
-		to: ''
-	});
 	for (const component of components) {
 		const componentName = component.name;
 		const upperComponentName = `DB${transformToUpperComponentName(component.name)}`;
diff --git a/packages/components/scripts/post-build/vue.ts b/packages/components/scripts/post-build/vue.ts
index cd75f213e24..9ed1de1e408 100644
--- a/packages/components/scripts/post-build/vue.ts
+++ b/packages/components/scripts/post-build/vue.ts
@@ -12,12 +12,6 @@ export default (tmp?: boolean) => {
 		from: /react/g,
 		to: `vue`
 	});
-	// Activate vue specific event handling
-	replaceInFileSync({
-		files: `../../${outputFolder}/vue/src/utils/form-components.ts`,
-		from: `// VUE:`,
-		to: ``
-	});
 	for (const component of components) {
 		const componentName = component.name;
 		const vueFile = `../../${outputFolder}/vue/src/components/${componentName}/${componentName}.vue`;
@@ -43,6 +37,19 @@ export default (tmp?: boolean) => {
 				}
 			];
 
+			/* This is a workaround for valid/invalid Messages.
+			 *  If a valid/invalid message appears it will use the old this._value,
+			 *  so we need to overwrite this._value with the current event.target.value.   */
+
+			if (['select', 'textarea', 'input'].includes(componentName)) {
+				replacements.push({
+					from: 'if (props.onInput) {',
+					to:
+						'this._value = (event.target as any).value;\n' +
+						'if (props.onInput) {'
+				});
+			}
+
 			if (component?.config?.vue?.vModel) {
 				replacements.push({
 					from: 'const props =',
diff --git a/packages/components/src/components/checkbox/checkbox.lite.tsx b/packages/components/src/components/checkbox/checkbox.lite.tsx
index 310caf62dcf..122c93eee0b 100644
--- a/packages/components/src/components/checkbox/checkbox.lite.tsx
+++ b/packages/components/src/components/checkbox/checkbox.lite.tsx
@@ -25,7 +25,10 @@ import {
 	DEFAULT_VALID_MESSAGE_ID_SUFFIX
 } from '../../shared/constants';
 import { ChangeEvent, InteractionEvent } from '../../shared/model';
-import { handleFrameworkEvent } from '../../utils/form-components';
+import {
+	handleFrameworkEventAngular,
+	handleFrameworkEventVue
+} from '../../utils/form-components';
 import DBInfotext from '../infotext/infotext.lite';
 
 useMetadata({
@@ -57,8 +60,9 @@ export default function DBCheckbox(props: DBCheckboxProps) {
 			}
 
 			useTarget({
-				angular: () => handleFrameworkEvent(this, event, 'checked'),
-				vue: () => handleFrameworkEvent(this, event, 'checked')
+				angular: () =>
+					handleFrameworkEventAngular(this, event, 'checked'),
+				vue: () => handleFrameworkEventVue(this, event, 'checked')
 			});
 
 			/* For a11y reasons we need to map the correct message with the checkbox */
diff --git a/packages/components/src/components/input/input.lite.tsx b/packages/components/src/components/input/input.lite.tsx
index 0587b5daf9d..2e79b2a4bb7 100644
--- a/packages/components/src/components/input/input.lite.tsx
+++ b/packages/components/src/components/input/input.lite.tsx
@@ -36,7 +36,10 @@ import {
 	ValueLabelType
 } from '../../shared/model';
 import DBInfotext from '../infotext/infotext.lite';
-import { handleFrameworkEvent } from '../../utils/form-components';
+import {
+	handleFrameworkEventVue,
+	handleFrameworkEventAngular
+} from '../../utils/form-components';
 
 useMetadata({
 	angular: {
@@ -77,8 +80,8 @@ export default function DBInput(props: DBInputProps) {
 			}
 
 			useTarget({
-				angular: () => handleFrameworkEvent(this, event),
-				vue: () => handleFrameworkEvent(this, event)
+				angular: () => handleFrameworkEventAngular(this, event),
+				vue: () => handleFrameworkEventVue(this, event)
 			});
 
 			/* For a11y reasons we need to map the correct message with the input */
diff --git a/packages/components/src/components/radio/radio.lite.tsx b/packages/components/src/components/radio/radio.lite.tsx
index 70e4c024e7f..78e625f545f 100644
--- a/packages/components/src/components/radio/radio.lite.tsx
+++ b/packages/components/src/components/radio/radio.lite.tsx
@@ -11,7 +11,10 @@ import {
 import { DBRadioProps, DBRadioState } from './model';
 import { cls, getHideProp, uuid } from '../../utils';
 import { ChangeEvent, InteractionEvent } from '../../shared/model';
-import { handleFrameworkEvent } from '../../utils/form-components';
+import {
+	handleFrameworkEventAngular,
+	handleFrameworkEventVue
+} from '../../utils/form-components';
 
 useMetadata({
 	angular: {
@@ -36,8 +39,9 @@ export default function DBRadio(props: DBRadioProps) {
 			}
 
 			useTarget({
-				angular: () => handleFrameworkEvent(this, event, 'checked'),
-				vue: () => handleFrameworkEvent(this, event, 'checked')
+				angular: () =>
+					handleFrameworkEventAngular(this, event, 'checked'),
+				vue: () => handleFrameworkEventVue(this, event, 'checked')
 			});
 		},
 		handleBlur: (event: InteractionEvent<HTMLInputElement>) => {
diff --git a/packages/components/src/components/select/select.lite.tsx b/packages/components/src/components/select/select.lite.tsx
index 70350491c04..e1cf5470ef9 100644
--- a/packages/components/src/components/select/select.lite.tsx
+++ b/packages/components/src/components/select/select.lite.tsx
@@ -34,7 +34,10 @@ import {
 	InputEvent,
 	InteractionEvent
 } from '../../shared/model';
-import { handleFrameworkEvent } from '../../utils/form-components';
+import {
+	handleFrameworkEventAngular,
+	handleFrameworkEventVue
+} from '../../utils/form-components';
 
 useMetadata({
 	angular: {
@@ -81,8 +84,8 @@ export default function DBSelect(props: DBSelectProps) {
 			}
 
 			useTarget({
-				angular: () => handleFrameworkEvent(this, event),
-				vue: () => handleFrameworkEvent(this, event)
+				angular: () => handleFrameworkEventAngular(this, event),
+				vue: () => handleFrameworkEventVue(this, event)
 			});
 
 			/* For a11y reasons we need to map the correct message with the select */
diff --git a/packages/components/src/components/switch/switch.lite.tsx b/packages/components/src/components/switch/switch.lite.tsx
index 01e1cd9d0ab..7eb6604ca9b 100644
--- a/packages/components/src/components/switch/switch.lite.tsx
+++ b/packages/components/src/components/switch/switch.lite.tsx
@@ -10,7 +10,10 @@ import {
 import { DBSwitchProps, DBSwitchState } from './model';
 import { cls, getHideProp, uuid } from '../../utils';
 import { ChangeEvent, InteractionEvent } from '../../shared/model';
-import { handleFrameworkEvent } from '../../utils/form-components';
+import {
+	handleFrameworkEventAngular,
+	handleFrameworkEventVue
+} from '../../utils/form-components';
 
 useMetadata({
 	angular: {
@@ -40,8 +43,9 @@ export default function DBSwitch(props: DBSwitchProps) {
 			state._checked = (event.target as any)?.['checked'];
 
 			useTarget({
-				angular: () => handleFrameworkEvent(this, event, 'checked'),
-				vue: () => handleFrameworkEvent(this, event, 'checked')
+				angular: () =>
+					handleFrameworkEventAngular(this, event, 'checked'),
+				vue: () => handleFrameworkEventVue(this, event, 'checked')
 			});
 		},
 		handleBlur: (event: InteractionEvent<HTMLInputElement>) => {
diff --git a/packages/components/src/components/tab-item/tab-item.lite.tsx b/packages/components/src/components/tab-item/tab-item.lite.tsx
index fe4ca5d5b9a..a9bdf909616 100644
--- a/packages/components/src/components/tab-item/tab-item.lite.tsx
+++ b/packages/components/src/components/tab-item/tab-item.lite.tsx
@@ -11,7 +11,10 @@ import {
 import type { DBTabItemProps, DBTabItemState } from './model';
 import { cls, getBooleanAsString, getHideProp } from '../../utils';
 import { ChangeEvent } from '../../shared/model';
-import { handleFrameworkEvent } from '../../utils/form-components';
+import {
+	handleFrameworkEventAngular,
+	handleFrameworkEventVue
+} from '../../utils/form-components';
 
 useMetadata({
 	angular: {
@@ -48,8 +51,9 @@ export default function DBTabItem(props: DBTabItemProps) {
 			});
 
 			useTarget({
-				angular: () => handleFrameworkEvent(this, event, 'checked'),
-				vue: () => handleFrameworkEvent(this, event, 'checked')
+				angular: () =>
+					handleFrameworkEventAngular(this, event, 'checked'),
+				vue: () => handleFrameworkEventVue(this, event, 'checked')
 			});
 		}
 	});
diff --git a/packages/components/src/components/textarea/textarea.lite.tsx b/packages/components/src/components/textarea/textarea.lite.tsx
index ef6d6034bcc..5d58e1b26c7 100644
--- a/packages/components/src/components/textarea/textarea.lite.tsx
+++ b/packages/components/src/components/textarea/textarea.lite.tsx
@@ -29,7 +29,10 @@ import {
 	DEFAULT_VALID_MESSAGE_ID_SUFFIX
 } from '../../shared/constants';
 import { ChangeEvent, InputEvent, InteractionEvent } from '../../shared/model';
-import { handleFrameworkEvent } from '../../utils/form-components';
+import {
+	handleFrameworkEventAngular,
+	handleFrameworkEventVue
+} from '../../utils/form-components';
 
 useMetadata({
 	angular: {
@@ -68,8 +71,8 @@ export default function DBTextarea(props: DBTextareaProps) {
 				props.change(event);
 			}
 			useTarget({
-				angular: () => handleFrameworkEvent(this, event),
-				vue: () => handleFrameworkEvent(this, event)
+				angular: () => handleFrameworkEventAngular(this, event),
+				vue: () => handleFrameworkEventVue(this, event)
 			});
 
 			/* For a11y reasons we need to map the correct message with the textarea */
diff --git a/packages/components/src/utils/form-components.ts b/packages/components/src/utils/form-components.ts
index 82e09d15f44..7e5f7b12755 100644
--- a/packages/components/src/utils/form-components.ts
+++ b/packages/components/src/utils/form-components.ts
@@ -1,13 +1,19 @@
-export const handleFrameworkEvent = (
+/* eslint-disable @typescript-eslint/no-explicit-any */
+export const handleFrameworkEventAngular = (
 	component: any,
 	event: any,
 	modelValue: string = 'value'
 ): void => {
-	// TODO: Replace this with the solution out of https://github.com/BuilderIO/mitosis/issues/833 after this has been "solved"
-	// VUE:component.emit(`update:${modelValue}`, event.target[modelValue]);
 	// Change event to work with reactive and template driven forms
-	// ANGULAR: component.propagateChange(event.target[modelValue]);
-	// ANGULAR: component.writeValue(event.target[modelValue]);
+	component.propagateChange(event.target[modelValue]);
+	component.writeValue(event.target[modelValue]);
 };
 
-export default { handleFrameworkEvent };
+export const handleFrameworkEventVue = (
+	component: any,
+	event: any,
+	modelValue: string = 'value'
+): void => {
+	// TODO: Replace this with the solution out of https://github.com/BuilderIO/mitosis/issues/833 after this has been "solved"
+	component.emit(`update:${modelValue}`, event.target[modelValue]);
+};

From e2ab1afa1cc00d6cc1e460939f12b9c218df7bb1 Mon Sep 17 00:00:00 2001
From: Nicolas Merget <nicolas.merget@deutschebahn.com>
Date: Thu, 16 Jan 2025 13:44:00 +0100
Subject: [PATCH 07/10] fix: issues with class in vue

---
 packages/components/scripts/post-build/vue.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/components/scripts/post-build/vue.ts b/packages/components/scripts/post-build/vue.ts
index 9ed1de1e408..c66d870a91b 100644
--- a/packages/components/scripts/post-build/vue.ts
+++ b/packages/components/scripts/post-build/vue.ts
@@ -34,6 +34,10 @@ export default (tmp?: boolean) => {
 				{
 					from: /immediate: true/g,
 					to: 'immediate: true,\nflush: "post"'
+				},
+				{
+					from: 'className',
+					to: 'props.class'
 				}
 			];
 

From a4cd4222468d804e6701a4db598a256cc825cedd Mon Sep 17 00:00:00 2001
From: Nicolas Merget <nicolas.merget@deutschebahn.com>
Date: Thu, 16 Jan 2025 14:10:16 +0100
Subject: [PATCH 08/10] fix: issues with class in vue

---
 .../vue-showcase/src/components/DefaultComponent.vue      | 6 +++---
 showcases/vue-showcase/src/components/stack/Stack.vue     | 8 ++++----
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/showcases/vue-showcase/src/components/DefaultComponent.vue b/showcases/vue-showcase/src/components/DefaultComponent.vue
index 181d7f088c9..66e3f2652f9 100644
--- a/showcases/vue-showcase/src/components/DefaultComponent.vue
+++ b/showcases/vue-showcase/src/components/DefaultComponent.vue
@@ -112,7 +112,7 @@ const getElevation = (): "1" | "2" | "3" =>
 	<!-- TODO: Slots not working for nested components? -> Had to copy paste variant-cards...	-->
 	<DBCard
 		v-if="variantRef"
-		className="variants-card"
+		class="variants-card"
 		:elevation-level="getElevation()"
 	>
 		<div
@@ -141,7 +141,7 @@ const getElevation = (): "1" | "2" | "3" =>
 		<div v-for="(variant, variantIndex) in variants">
 			<DBDivider></DBDivider>
 			<DBLink
-				className="link-headline"
+				class="link-headline"
 				content="external"
 				target="_blank"
 				:href="getLink(variant.name)"
@@ -149,7 +149,7 @@ const getElevation = (): "1" | "2" | "3" =>
 			>
 				{{ variant.name }}
 			</DBLink>
-			<DBCard className="variants-card" :elevation-level="getElevation()">
+			<DBCard class="variants-card" :elevation-level="getElevation()">
 				<div
 					:role="variant.role"
 					:aria-label="variant.role ? variant?.name : undefined"
diff --git a/showcases/vue-showcase/src/components/stack/Stack.vue b/showcases/vue-showcase/src/components/stack/Stack.vue
index 75b45f7f996..bd2f2c892be 100644
--- a/showcases/vue-showcase/src/components/stack/Stack.vue
+++ b/showcases/vue-showcase/src/components/stack/Stack.vue
@@ -14,7 +14,7 @@ import { DBStack, DBInfotext, DBDivider } from "../../../../../output/vue/src";
 					{{ exampleName }}
 				</DBInfotext>
 				<DBStack
-					:className="
+					:class="
 						(exampleProps.justifyContent ?? exampleProps.alignment)
 							? 'stack-container stack-show-alignment'
 							: 'stack-container'
@@ -26,17 +26,17 @@ import { DBStack, DBInfotext, DBDivider } from "../../../../../output/vue/src";
 					:direction="exampleProps.direction"
 					:justifyContent="exampleProps.justifyContent"
 				>
-					<span className="dummy-component">
+					<span class="dummy-component">
 						<a href="#">Content 1</a>
 					</span>
 					<template v-if="exampleProps.variant === 'divider'"
 						><DBDivider />
 					</template>
-					<span className="dummy-component"> Content 2 </span>
+					<span class="dummy-component"> Content 2 </span>
 					<template v-if="exampleProps.variant === 'divider'"
 						><DBDivider />
 					</template>
-					<span className="dummy-component"> Content 3 </span>
+					<span class="dummy-component"> Content 3 </span>
 				</DBStack>
 			</DBStack>
 		</template>

From 397bf2a5cbe887cedda32c2e284600157bbc84f6 Mon Sep 17 00:00:00 2001
From: Nicolas Merget <nicolas.merget@deutschebahn.com>
Date: Thu, 16 Jan 2025 15:16:42 +0100
Subject: [PATCH 09/10] fix: issue with vue v-model

---
 packages/components/scripts/post-build/vue.ts                 | 4 ++++
 packages/components/src/components/checkbox/checkbox.lite.tsx | 2 +-
 packages/components/src/components/input/input.lite.tsx       | 2 +-
 packages/components/src/components/radio/radio.lite.tsx       | 2 +-
 packages/components/src/components/select/select.lite.tsx     | 2 +-
 packages/components/src/components/switch/switch.lite.tsx     | 2 +-
 packages/components/src/components/tab-item/tab-item.lite.tsx | 2 +-
 packages/components/src/components/textarea/textarea.lite.tsx | 2 +-
 packages/components/src/utils/form-components.ts              | 4 ++--
 showcases/vue-showcase/src/components/section/Section.vue     | 2 +-
 10 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/packages/components/scripts/post-build/vue.ts b/packages/components/scripts/post-build/vue.ts
index c66d870a91b..946c3535921 100644
--- a/packages/components/scripts/post-build/vue.ts
+++ b/packages/components/scripts/post-build/vue.ts
@@ -63,6 +63,10 @@ export default (tmp?: boolean) => {
 						)
 					)})\n\nconst props =`
 				});
+				replacements.push({
+					from: 'handleFrameworkEventVue(() => {}',
+					to: 'handleFrameworkEventVue(emit'
+				});
 			}
 
 			runReplacements(replacements, component, 'vue', vueFile);
diff --git a/packages/components/src/components/checkbox/checkbox.lite.tsx b/packages/components/src/components/checkbox/checkbox.lite.tsx
index 122c93eee0b..cff66c952a1 100644
--- a/packages/components/src/components/checkbox/checkbox.lite.tsx
+++ b/packages/components/src/components/checkbox/checkbox.lite.tsx
@@ -62,7 +62,7 @@ export default function DBCheckbox(props: DBCheckboxProps) {
 			useTarget({
 				angular: () =>
 					handleFrameworkEventAngular(this, event, 'checked'),
-				vue: () => handleFrameworkEventVue(this, event, 'checked')
+				vue: () => handleFrameworkEventVue(() => {}, event, 'checked')
 			});
 
 			/* For a11y reasons we need to map the correct message with the checkbox */
diff --git a/packages/components/src/components/input/input.lite.tsx b/packages/components/src/components/input/input.lite.tsx
index 2e79b2a4bb7..b2d8e01956d 100644
--- a/packages/components/src/components/input/input.lite.tsx
+++ b/packages/components/src/components/input/input.lite.tsx
@@ -81,7 +81,7 @@ export default function DBInput(props: DBInputProps) {
 
 			useTarget({
 				angular: () => handleFrameworkEventAngular(this, event),
-				vue: () => handleFrameworkEventVue(this, event)
+				vue: () => handleFrameworkEventVue(() => {}, event)
 			});
 
 			/* For a11y reasons we need to map the correct message with the input */
diff --git a/packages/components/src/components/radio/radio.lite.tsx b/packages/components/src/components/radio/radio.lite.tsx
index 78e625f545f..6f51383fb51 100644
--- a/packages/components/src/components/radio/radio.lite.tsx
+++ b/packages/components/src/components/radio/radio.lite.tsx
@@ -41,7 +41,7 @@ export default function DBRadio(props: DBRadioProps) {
 			useTarget({
 				angular: () =>
 					handleFrameworkEventAngular(this, event, 'checked'),
-				vue: () => handleFrameworkEventVue(this, event, 'checked')
+				vue: () => handleFrameworkEventVue(() => {}, event, 'checked')
 			});
 		},
 		handleBlur: (event: InteractionEvent<HTMLInputElement>) => {
diff --git a/packages/components/src/components/select/select.lite.tsx b/packages/components/src/components/select/select.lite.tsx
index e1cf5470ef9..8a4b5746d4c 100644
--- a/packages/components/src/components/select/select.lite.tsx
+++ b/packages/components/src/components/select/select.lite.tsx
@@ -85,7 +85,7 @@ export default function DBSelect(props: DBSelectProps) {
 
 			useTarget({
 				angular: () => handleFrameworkEventAngular(this, event),
-				vue: () => handleFrameworkEventVue(this, event)
+				vue: () => handleFrameworkEventVue(() => {}, event)
 			});
 
 			/* For a11y reasons we need to map the correct message with the select */
diff --git a/packages/components/src/components/switch/switch.lite.tsx b/packages/components/src/components/switch/switch.lite.tsx
index 7eb6604ca9b..117e7e16563 100644
--- a/packages/components/src/components/switch/switch.lite.tsx
+++ b/packages/components/src/components/switch/switch.lite.tsx
@@ -45,7 +45,7 @@ export default function DBSwitch(props: DBSwitchProps) {
 			useTarget({
 				angular: () =>
 					handleFrameworkEventAngular(this, event, 'checked'),
-				vue: () => handleFrameworkEventVue(this, event, 'checked')
+				vue: () => handleFrameworkEventVue(() => {}, event, 'checked')
 			});
 		},
 		handleBlur: (event: InteractionEvent<HTMLInputElement>) => {
diff --git a/packages/components/src/components/tab-item/tab-item.lite.tsx b/packages/components/src/components/tab-item/tab-item.lite.tsx
index a9bdf909616..7fc365515ca 100644
--- a/packages/components/src/components/tab-item/tab-item.lite.tsx
+++ b/packages/components/src/components/tab-item/tab-item.lite.tsx
@@ -53,7 +53,7 @@ export default function DBTabItem(props: DBTabItemProps) {
 			useTarget({
 				angular: () =>
 					handleFrameworkEventAngular(this, event, 'checked'),
-				vue: () => handleFrameworkEventVue(this, event, 'checked')
+				vue: () => handleFrameworkEventVue(() => {}, event, 'checked')
 			});
 		}
 	});
diff --git a/packages/components/src/components/textarea/textarea.lite.tsx b/packages/components/src/components/textarea/textarea.lite.tsx
index 5d58e1b26c7..3b762dc1d40 100644
--- a/packages/components/src/components/textarea/textarea.lite.tsx
+++ b/packages/components/src/components/textarea/textarea.lite.tsx
@@ -72,7 +72,7 @@ export default function DBTextarea(props: DBTextareaProps) {
 			}
 			useTarget({
 				angular: () => handleFrameworkEventAngular(this, event),
-				vue: () => handleFrameworkEventVue(this, event)
+				vue: () => handleFrameworkEventVue(() => {}, event)
 			});
 
 			/* For a11y reasons we need to map the correct message with the textarea */
diff --git a/packages/components/src/utils/form-components.ts b/packages/components/src/utils/form-components.ts
index 7e5f7b12755..3dca5d34bc8 100644
--- a/packages/components/src/utils/form-components.ts
+++ b/packages/components/src/utils/form-components.ts
@@ -10,10 +10,10 @@ export const handleFrameworkEventAngular = (
 };
 
 export const handleFrameworkEventVue = (
-	component: any,
+	emit: (event: string, ...args: any[]) => void,
 	event: any,
 	modelValue: string = 'value'
 ): void => {
 	// TODO: Replace this with the solution out of https://github.com/BuilderIO/mitosis/issues/833 after this has been "solved"
-	component.emit(`update:${modelValue}`, event.target[modelValue]);
+	emit(`update:${modelValue}`, event.target[modelValue]);
 };
diff --git a/showcases/vue-showcase/src/components/section/Section.vue b/showcases/vue-showcase/src/components/section/Section.vue
index 0183ef6fb1d..23e77eb9844 100644
--- a/showcases/vue-showcase/src/components/section/Section.vue
+++ b/showcases/vue-showcase/src/components/section/Section.vue
@@ -10,7 +10,7 @@ import { DBSection, DBCard } from "../../../../../output/vue/src";
 			#example="{ exampleIndex, variantIndex, exampleName, exampleProps }"
 		>
 			<DBSection
-				className="db-informational-bg-basic-level-2 section-card-container"
+				class="db-informational-bg-basic-level-2 section-card-container"
 				:spacing="exampleProps?.spacing"
 				:width="exampleProps?.width"
 			>

From 3477988bf25ac3315957400c749476be689bf88f Mon Sep 17 00:00:00 2001
From: Nicolas Merget <nicolas.merget@deutschebahn.com>
Date: Fri, 17 Jan 2025 08:26:46 +0100
Subject: [PATCH 10/10] fix: issue with vue post build script

---
 packages/components/scripts/post-build/vue.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/scripts/post-build/vue.ts b/packages/components/scripts/post-build/vue.ts
index 946c3535921..62c884774ed 100644
--- a/packages/components/scripts/post-build/vue.ts
+++ b/packages/components/scripts/post-build/vue.ts
@@ -49,7 +49,7 @@ export default (tmp?: boolean) => {
 				replacements.push({
 					from: 'if (props.onInput) {',
 					to:
-						'this._value = (event.target as any).value;\n' +
+						'_value.value = (event.target as any).value;\n' +
 						'if (props.onInput) {'
 				});
 			}