diff --git a/__snapshots__/custom-select/showcase/webkit/DBCustomSelect-should-match-screenshot-1/DBCustomSelect-should-match-screenshot.png b/__snapshots__/custom-select/showcase/webkit/DBCustomSelect-should-match-screenshot-1/DBCustomSelect-should-match-screenshot.png
index 5513c2fe359c..f9e5deabfe21 100644
Binary files a/__snapshots__/custom-select/showcase/webkit/DBCustomSelect-should-match-screenshot-1/DBCustomSelect-should-match-screenshot.png and b/__snapshots__/custom-select/showcase/webkit/DBCustomSelect-should-match-screenshot-1/DBCustomSelect-should-match-screenshot.png differ
diff --git a/package-lock.json b/package-lock.json
index 86e6a07acfd3..3dcf3839b664 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3499,10 +3499,11 @@
       }
     },
     "node_modules/@builder.io/mitosis": {
-      "version": "0.10.0",
-      "resolved": "https://registry.npmjs.org/@builder.io/mitosis/-/mitosis-0.10.0.tgz",
-      "integrity": "sha512-/4muYT6Mzj+5ZGjcw4EwMgUejRElFjrUik02RKoRRkL5XolovSh54uVyCeoulRnmEu/ivF0kyGhzLOaipdDpRg==",
+      "version": "0.12.1",
+      "resolved": "https://registry.npmjs.org/@builder.io/mitosis/-/mitosis-0.12.1.tgz",
+      "integrity": "sha512-6jwAbTUb5fnYqGVe1Ll4JWrJmJJEkAkG1T4k9Jx+z9/7SzBzNnwo19EXEKlSE8FnHod0i6+sx5j/tcWoD9fplw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@angular/compiler": "^11.2.11",
         "@babel/core": "7.14.5",
@@ -3530,12 +3531,14 @@
       }
     },
     "node_modules/@builder.io/mitosis-cli": {
-      "version": "0.10.0",
-      "resolved": "https://registry.npmjs.org/@builder.io/mitosis-cli/-/mitosis-cli-0.10.0.tgz",
-      "integrity": "sha512-EnkZ5Uh35jQ7GGZRb5m0ctBUZru0siZ3geSIY9RH/pcFJyB4E7WkxbHfWsAVq5YDlj0Zk4Ufs0Qy1cvXARKYYA==",
+      "version": "0.12.1",
+      "resolved": "https://registry.npmjs.org/@builder.io/mitosis-cli/-/mitosis-cli-0.12.1.tgz",
+      "integrity": "sha512-XzCZkerE+ZgZ4hbliHhA4z81vSMhO7s3ZS9aUTeZCuQNjw5yBQEirs5vlNJL6PBQipgQRJLtVwuhQOXxODe5ow==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@builder.io/mitosis": "0.10.0",
+        "@builder.io/mitosis": "0.12.1",
+        "cosmiconfig": "9.0.0",
         "debug": "^4.3.4",
         "dedent": "^0.7.0",
         "esbuild": "^0.12.16",
@@ -3581,6 +3584,7 @@
       "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-11.2.14.tgz",
       "integrity": "sha512-XBOK3HgA+/y6Cz7kOX4zcJYmgJ264XnfcbXUMU2cD7Ac+mbNhLPKohWrEiSWalfcjnpf5gRfufQrQP7lpAGu0A==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "tslib": "^2.0.0"
       }
@@ -3590,6 +3594,7 @@
       "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.14.5.tgz",
       "integrity": "sha512-RN/AwP2DJmQTZSfiDaD+JQQ/J99KsIpOCfBE5pL+5jJSt7nI3nYGoAXZu+ffYSQ029NLs2DstZb+eR81uuARgg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@babel/code-frame": "^7.14.5",
         "@babel/generator": "^7.14.5",
@@ -3620,6 +3625,7 @@
       "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz",
       "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==",
       "dev": true,
+      "license": "MIT",
       "bin": {
         "prettier": "bin-prettier.js"
       },
@@ -3635,6 +3641,7 @@
       "resolved": "https://registry.npmjs.org/prettier-plugin-organize-imports/-/prettier-plugin-organize-imports-3.2.4.tgz",
       "integrity": "sha512-6m8WBhIp0dfwu0SkgfOxJqh+HpdyfqSSLfKKRZSFbDuEQXDDndb8fTpRWkUrX/uBenkex3MgnVk0J3b3Y5byog==",
       "dev": true,
+      "license": "MIT",
       "peerDependencies": {
         "@volar/vue-language-plugin-pug": "^1.0.4",
         "@volar/vue-typescript": "^1.0.4",
@@ -3655,6 +3662,7 @@
       "resolved": "https://registry.npmjs.org/prettier-plugin-svelte/-/prettier-plugin-svelte-2.10.1.tgz",
       "integrity": "sha512-Wlq7Z5v2ueCubWo0TZzKc9XHcm7TDxqcuzRuGd0gcENfzfT4JZ9yDlCbEgxWgiPmLHkBjfOtpAWkcT28MCDpUQ==",
       "dev": true,
+      "license": "MIT",
       "peerDependencies": {
         "prettier": "^1.16.4 || ^2.0.0",
         "svelte": "^3.2.0 || ^4.0.0-next.0"
@@ -3665,6 +3673,7 @@
       "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
       "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
       "dev": true,
+      "license": "ISC",
       "bin": {
         "semver": "bin/semver.js"
       }
@@ -3674,6 +3683,7 @@
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
       "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==",
       "dev": true,
+      "license": "BSD-3-Clause",
       "engines": {
         "node": ">=0.10.0"
       }
@@ -42560,8 +42570,8 @@
       },
       "devDependencies": {
         "@builder.io/eslint-plugin-mitosis": "0.0.17",
-        "@builder.io/mitosis": "0.10.0",
-        "@builder.io/mitosis-cli": "0.10.0",
+        "@builder.io/mitosis": "0.12.1",
+        "@builder.io/mitosis-cli": "0.12.1",
         "@typescript-eslint/eslint-plugin": "8.37.0",
         "cpr": "3.0.1",
         "cssnano": "7.1.0",
diff --git a/packages/components/configs/angular/index.cjs b/packages/components/configs/angular/index.cjs
index 89d4c2139402..827e59f644d0 100644
--- a/packages/components/configs/angular/index.cjs
+++ b/packages/components/configs/angular/index.cjs
@@ -6,6 +6,7 @@ const onClickPlugin = require('../plugins/on-click.cjs');
 module.exports = {
 	typescript: true,
 	attributePassing: {
+		enabled: true,
 		customRef: '_ref'
 	},
 	api: 'signals',
diff --git a/packages/components/package.json b/packages/components/package.json
index 33d19959f39b..0c58bc91fef4 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -46,8 +46,8 @@
   },
   "devDependencies": {
     "@builder.io/eslint-plugin-mitosis": "0.0.17",
-    "@builder.io/mitosis": "0.10.0",
-    "@builder.io/mitosis-cli": "0.10.0",
+    "@builder.io/mitosis": "0.12.1",
+    "@builder.io/mitosis-cli": "0.12.1",
     "@typescript-eslint/eslint-plugin": "8.37.0",
     "cpr": "3.0.1",
     "cssnano": "7.1.0",
diff --git a/packages/components/scripts/post-build/angular.ts b/packages/components/scripts/post-build/angular.ts
index e4846d39986a..313560688d26 100644
--- a/packages/components/scripts/post-build/angular.ts
+++ b/packages/components/scripts/post-build/angular.ts
@@ -1,6 +1,6 @@
 import { replaceInFileSync } from 'replace-in-file';
 
-import { readFileSync, writeFileSync } from 'node:fs';
+import { writeFileSync } from 'node:fs';
 
 import components, { Overwrite } from './components.js';
 
@@ -21,7 +21,7 @@ const setControlValueAccessorReplacements = (
 	replacements.push({
 		from: '} from "@angular/core";',
 		to:
-			`Renderer2, model } from "@angular/core";\n` +
+			`Renderer2 } from "@angular/core";\n` +
 			`import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\n`
 	});
 
@@ -58,7 +58,7 @@ const setControlValueAccessorReplacements = (
 	// insert custom interface functions before ngOnInit
 	// TODO update attribute by config if necessary (e.g. for checked attribute?)
 	replacements.push({
-		from: 'ngOnInit()',
+		from: 'ngAfterViewInit()',
 		to: `
 		writeValue(value: any) {
 			${valueAccessorRequired ? 'if(value){' : ''}
@@ -83,7 +83,7 @@ const setControlValueAccessorReplacements = (
 		  this.disabled.set(disabled);
 		}
 
-		ngOnInit()`
+		ngAfterViewInit()`
 	});
 };
 
@@ -169,29 +169,12 @@ export default (tmp?: boolean) => {
 		});
 
 		const replacements: Overwrite[] = [
-			// TODO: We don't need this after Angular drops support for v17 in may 2025
 			{
 				from: /allowSignalWrites: true,/g,
 				to: ''
 			}
 		];
 
-		if (
-			readFileSync(file)
-				.toString()
-				.includes('this.initialized.set(true);')
-		) {
-			// TODO: Solve this in mitosis by splitting onInit and onMount into ngOnInit and ngAfterViewInit
-			replacements.push({
-				from: 'this.initialized.set(true);',
-				to: ''
-			});
-			replacements.push({
-				from: 'ngAfterViewInit() {',
-				to: 'ngAfterViewInit() {\nthis.initialized.set(true);\n'
-			});
-		}
-
 		if (component.config?.angular?.controlValueAccessor) {
 			setControlValueAccessorReplacements(
 				replacements,
diff --git a/packages/components/scripts/post-build/components.ts b/packages/components/scripts/post-build/components.ts
index 363245f891a2..a614566741c4 100644
--- a/packages/components/scripts/post-build/components.ts
+++ b/packages/components/scripts/post-build/components.ts
@@ -75,18 +75,7 @@ export const getComponents = (): Component[] => [
 				{
 					from: 'attr.checked',
 					to: 'checked'
-				},
-				// To remove whitespaces from label...
-				{
-					from: `      <label [attr.id]="_labelId()">
-        {{label() ?? DEFAULT_LABEL}}
-        <select`,
-					to: `<label [attr.id]="_labelId()">{{label() ?? DEFAULT_LABEL}}<select`
-				},
-				// TODO: Move this to mitosis
-				{ from: 'trackByOption0', to: 'trackByOption0(i,option)' },
-				{ from: 'trackByOption1', to: 'trackByOption1(index,option)' },
-				{ from: 'trackByOption2', to: 'trackByOption2(i,option)' }
+				}
 			],
 			react: [
 				{ from: 'key={uuid()}', to: 'key={getOptionLabel(option)}' }
diff --git a/packages/components/src/components/checkbox/checkbox.lite.tsx b/packages/components/src/components/checkbox/checkbox.lite.tsx
index 59433724a677..461e72c394a0 100644
--- a/packages/components/src/components/checkbox/checkbox.lite.tsx
+++ b/packages/components/src/components/checkbox/checkbox.lite.tsx
@@ -34,7 +34,10 @@ import { DBCheckboxProps, DBCheckboxState } from './model';
 
 useMetadata({
 	angular: {
-		nativeAttributes: ['disabled', 'required', 'checked', 'indeterminate']
+		nativeAttributes: ['disabled', 'required', 'checked', 'indeterminate'],
+		signals: {
+			writeable: ['disabled', 'checked']
+		}
 	}
 });
 
diff --git a/packages/components/src/components/custom-select-list-item/custom-select-list-item.lite.tsx b/packages/components/src/components/custom-select-list-item/custom-select-list-item.lite.tsx
index c12851759843..d05c1c2887f5 100644
--- a/packages/components/src/components/custom-select-list-item/custom-select-list-item.lite.tsx
+++ b/packages/components/src/components/custom-select-list-item/custom-select-list-item.lite.tsx
@@ -21,7 +21,10 @@ import {
 
 useMetadata({
 	angular: {
-		nativeAttributes: ['disabled', 'checked', 'value', 'name']
+		nativeAttributes: ['disabled', 'checked', 'value', 'name'],
+		signals: {
+			writeable: ['disabled', 'checked']
+		}
 	}
 });
 
diff --git a/packages/components/src/components/custom-select/custom-select.lite.tsx b/packages/components/src/components/custom-select/custom-select.lite.tsx
index f95ff7e36ba4..9608558c0414 100644
--- a/packages/components/src/components/custom-select/custom-select.lite.tsx
+++ b/packages/components/src/components/custom-select/custom-select.lite.tsx
@@ -67,7 +67,10 @@ import {
 
 useMetadata({
 	angular: {
-		nativeAttributes: ['disabled']
+		nativeAttributes: ['disabled', 'required', 'multiple'],
+		signals: {
+			writeable: ['disabled', 'values']
+		}
 	}
 });
 
@@ -99,6 +102,7 @@ export default function DBCustomSelect(props: DBCustomSelectProps) {
 		_placeholderId: undefined,
 		_infoTextId: undefined,
 		_validity: 'no-validation',
+		_userInteraction: false,
 		// Workaround for Vue output: TS for Vue would think that it could be a function, and by this we clarify that it's a string
 		_descByIds: '',
 		_selectedLabels: '',
@@ -142,7 +146,9 @@ export default function DBCustomSelect(props: DBCustomSelectProps) {
 					state._voiceOverFallback = state._invalidMessage;
 					delay(() => (state._voiceOverFallback = ''), 1000);
 				}
-				state._validity = props.validation ?? 'invalid';
+				if (state._userInteraction) {
+					state._validity = props.validation ?? 'invalid';
+				}
 			} else if (
 				state.hasValidState() &&
 				selectRef?.validity.valid &&
@@ -422,6 +428,7 @@ export default function DBCustomSelect(props: DBCustomSelectProps) {
 			if (skip) return;
 
 			state._values = values;
+			state._userInteraction = true;
 			if (props.onOptionSelected) {
 				props.onOptionSelected(values ?? []);
 			}
@@ -688,8 +695,10 @@ export default function DBCustomSelect(props: DBCustomSelectProps) {
 	}, [props.values]);
 
 	onUpdate(() => {
-		state.handleValidation();
-	}, [state._values]);
+		if (selectRef) {
+			state.handleValidation();
+		}
+	}, [state._values, selectRef]);
 
 	onUpdate(() => {
 		state._validity = props.validation;
diff --git a/packages/components/src/components/custom-select/model.ts b/packages/components/src/components/custom-select/model.ts
index 2c40d1335229..91953fdeac21 100644
--- a/packages/components/src/components/custom-select/model.ts
+++ b/packages/components/src/components/custom-select/model.ts
@@ -261,6 +261,7 @@ export type DBCustomSelectDefaultState = {
 	_internalChangeTimestamp: number;
 	_documentClickListenerCallbackId?: string;
 	_searchValue?: string;
+	_userInteraction?: boolean;
 	getNativeSelectValue: () => string;
 	getOptionLabel: (option: CustomSelectOptionType) => string;
 	getOptionChecked: (value?: string) => boolean;
diff --git a/packages/components/src/components/header/header.lite.tsx b/packages/components/src/components/header/header.lite.tsx
index 18d5e0ef4b71..8e3872c1abb2 100644
--- a/packages/components/src/components/header/header.lite.tsx
+++ b/packages/components/src/components/header/header.lite.tsx
@@ -7,8 +7,8 @@ import {
 	useRef,
 	useStore
 } from '@builder.io/mitosis';
-import { DEFAULT_BURGER_MENU, DEFAULT_ID } from '../../shared/constants';
-import { addAttributeToChildren, cls, getBoolean, uuid } from '../../utils';
+import { DEFAULT_BURGER_MENU } from '../../shared/constants';
+import { addAttributeToChildren, cls, getBoolean } from '../../utils';
 import { isEventTargetNavigationItem } from '../../utils/navigation';
 import DBButton from '../button/button.lite';
 import DBDrawer from '../drawer/drawer.lite';
@@ -22,7 +22,6 @@ export default function DBHeader(props: DBHeaderProps) {
 	const _ref = useRef<HTMLDivElement | any>(null);
 	// jscpd:ignore-start
 	const state = useStore<DBHeaderState>({
-		_id: DEFAULT_ID,
 		initialized: false,
 		forcedToMobile: false,
 		handleToggle: (event?: any) => {
@@ -45,25 +44,19 @@ export default function DBHeader(props: DBHeaderProps) {
 
 	onMount(() => {
 		state.initialized = true;
-		state._id = props.id || 'header-' + uuid();
 	});
 
 	onUpdate(() => {
-		if (state.initialized && document && state._id && props.forceMobile) {
-			const headerElement = document.getElementById(
-				state._id ?? ''
-			) as HTMLElement;
-			if (headerElement) {
-				// Adds this attribute to the header to enable all styling which would have
-				// @media screen and (min-width: $db-screens-m) to show mobile navigation on a desktop device
-				addAttributeToChildren(headerElement, {
-					key: 'data-force-mobile',
-					value: 'true'
-				});
-			}
+		if (state.initialized && _ref && props.forceMobile) {
+			// Adds this attribute to the header to enable all styling which would have
+			// @media screen and (min-width: $db-screens-m) to show mobile navigation on a desktop device
+			addAttributeToChildren(_ref, {
+				key: 'data-force-mobile',
+				value: 'true'
+			});
 			state.forcedToMobile = true;
 		}
-	}, [state.initialized]);
+	}, [state.initialized, _ref]);
 
 	// jscpd:ignore-end
 
@@ -71,7 +64,7 @@ export default function DBHeader(props: DBHeaderProps) {
 		<header
 			ref={_ref}
 			class={cls('db-header', props.className)}
-			id={state._id}
+			id={props.id}
 			data-width={props.width}
 			data-on-forcing-mobile={props.forceMobile && !state.forcedToMobile}>
 			<DBDrawer
@@ -113,7 +106,6 @@ export default function DBHeader(props: DBHeaderProps) {
 				<div class="db-header-action-container">
 					<div class="db-header-burger-menu-container">
 						<DBButton
-							id={state._id + '-burger-menu'}
 							icon="menu"
 							noText
 							variant="ghost"
diff --git a/packages/components/src/components/input/input.lite.tsx b/packages/components/src/components/input/input.lite.tsx
index da2166fb0a8e..c809e4efb4dd 100644
--- a/packages/components/src/components/input/input.lite.tsx
+++ b/packages/components/src/components/input/input.lite.tsx
@@ -48,7 +48,10 @@ import { DBInputProps, DBInputState } from './model';
 
 useMetadata({
 	angular: {
-		nativeAttributes: ['disabled', 'required']
+		nativeAttributes: ['disabled', 'required'],
+		signals: {
+			writeable: ['disabled', 'value']
+		}
 	}
 });
 
diff --git a/packages/components/src/components/radio/radio.lite.tsx b/packages/components/src/components/radio/radio.lite.tsx
index b7bfa0c59f08..82256364ad73 100644
--- a/packages/components/src/components/radio/radio.lite.tsx
+++ b/packages/components/src/components/radio/radio.lite.tsx
@@ -18,7 +18,10 @@ import { DBRadioProps, DBRadioState } from './model';
 
 useMetadata({
 	angular: {
-		nativeAttributes: ['disabled', 'required', 'checked', 'indeterminate']
+		nativeAttributes: ['disabled', 'required', 'checked', 'indeterminate'],
+		signals: {
+			writeable: ['disabled', 'value']
+		}
 	}
 });
 useDefaultProps<DBRadioProps>({});
diff --git a/packages/components/src/components/select/select.lite.tsx b/packages/components/src/components/select/select.lite.tsx
index f93dd57b3450..cb05be057702 100644
--- a/packages/components/src/components/select/select.lite.tsx
+++ b/packages/components/src/components/select/select.lite.tsx
@@ -44,7 +44,10 @@ import { DBSelectOptionType, DBSelectProps, DBSelectState } from './model';
 
 useMetadata({
 	angular: {
-		nativeAttributes: ['disabled', 'required', 'value']
+		nativeAttributes: ['disabled', 'required', 'value'],
+		signals: {
+			writeable: ['disabled', 'value']
+		}
 	}
 });
 useDefaultProps<DBSelectProps>({});
diff --git a/packages/components/src/components/switch/switch.lite.tsx b/packages/components/src/components/switch/switch.lite.tsx
index c5c821e700db..86d70a2168a0 100644
--- a/packages/components/src/components/switch/switch.lite.tsx
+++ b/packages/components/src/components/switch/switch.lite.tsx
@@ -24,7 +24,10 @@ import { DBSwitchProps, DBSwitchState } from './model';
 
 useMetadata({
 	angular: {
-		nativeAttributes: ['disabled', 'required', 'checked', 'indeterminate']
+		nativeAttributes: ['disabled', 'required', 'checked', 'indeterminate'],
+		signals: {
+			writeable: ['disabled', 'checked']
+		}
 	}
 });
 useDefaultProps<DBSwitchProps>({});
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 293359029fcd..ef8888f60607 100644
--- a/packages/components/src/components/tab-item/tab-item.lite.tsx
+++ b/packages/components/src/components/tab-item/tab-item.lite.tsx
@@ -17,7 +17,10 @@ import type { DBTabItemProps, DBTabItemState } from './model';
 
 useMetadata({
 	angular: {
-		nativeAttributes: ['disabled']
+		nativeAttributes: ['disabled'],
+		signals: {
+			writeable: ['disabled', 'checked']
+		}
 	}
 });
 useDefaultProps<DBTabItemProps>({});
diff --git a/packages/components/src/components/textarea/textarea.lite.tsx b/packages/components/src/components/textarea/textarea.lite.tsx
index 3ad3c8b87598..07493fbe8ed6 100644
--- a/packages/components/src/components/textarea/textarea.lite.tsx
+++ b/packages/components/src/components/textarea/textarea.lite.tsx
@@ -38,7 +38,10 @@ import { DBTextareaProps, DBTextareaState } from './model';
 
 useMetadata({
 	angular: {
-		nativeAttributes: ['disabled', 'required']
+		nativeAttributes: ['disabled', 'required'],
+		signals: {
+			writeable: ['disabled', 'value']
+		}
 	}
 });
 useDefaultProps<DBTextareaProps>({});