From 5fcc7b0dfafa766f991e19308fd546ce20ebbada Mon Sep 17 00:00:00 2001
From: Nicolas Merget <nicolas.merget@deutschebahn.com>
Date: Tue, 30 Apr 2024 16:38:41 +0200
Subject: [PATCH 01/29] fix: a11y issue for all form components

---
 .../src/components/checkbox/checkbox.lite.tsx | 53 +++++++++----------
 .../src/components/input/input.lite.tsx       | 50 ++++++++---------
 .../src/components/radio/radio.lite.tsx       |  5 +-
 .../src/components/select/select.lite.tsx     | 51 +++++++++---------
 .../src/components/textarea/textarea.lite.tsx | 46 ++++++++--------
 5 files changed, 102 insertions(+), 103 deletions(-)

diff --git a/packages/components/src/components/checkbox/checkbox.lite.tsx b/packages/components/src/components/checkbox/checkbox.lite.tsx
index 65ec3f5de64..47c8c8da085 100644
--- a/packages/components/src/components/checkbox/checkbox.lite.tsx
+++ b/packages/components/src/components/checkbox/checkbox.lite.tsx
@@ -9,7 +9,6 @@ import {
 import { DBCheckboxProps, DBCheckboxState } from './model';
 import { cls, uuid } from '../../utils';
 import {
-	DEFAULT_ID,
 	DEFAULT_INVALID_MESSAGE,
 	DEFAULT_INVALID_MESSAGE_ID_SUFFIX,
 	DEFAULT_MESSAGE_ID_SUFFIX,
@@ -29,11 +28,16 @@ export default function DBCheckbox(props: DBCheckboxProps) {
 	// jscpd:ignore-start
 	const state = useStore<DBCheckboxState>({
 		initialized: false,
-		_id: DEFAULT_ID,
-		_messageId: DEFAULT_ID + DEFAULT_MESSAGE_ID_SUFFIX,
-		_validMessageId: DEFAULT_ID + DEFAULT_VALID_MESSAGE_ID_SUFFIX,
-		_invalidMessageId: DEFAULT_ID + DEFAULT_INVALID_MESSAGE_ID_SUFFIX,
-		_descByIds: '',
+		_id: 'checkbox-' + uuid(),
+		_messageId: this._id + DEFAULT_MESSAGE_ID_SUFFIX,
+		_validMessageId: this._id + DEFAULT_VALID_MESSAGE_ID_SUFFIX,
+		_invalidMessageId: this._id + DEFAULT_INVALID_MESSAGE_ID_SUFFIX,
+		_descByIds:
+			this._messageId +
+			' ' +
+			this._validMessageId +
+			' ' +
+			this._invalidMessageId,
 
 		handleChange: (event: ChangeEvent<HTMLInputElement>) => {
 			if (props.onChange) {
@@ -78,33 +82,27 @@ export default function DBCheckbox(props: DBCheckboxProps) {
 
 	onMount(() => {
 		state.initialized = true;
-		state._id = props.id || 'checkbox-' + uuid();
+		state._id = props.id || state._id;
 	});
 
 	onUpdate(() => {
-		if (state.initialized && state._id) {
-			state._messageId = state._id + DEFAULT_MESSAGE_ID_SUFFIX;
-			state._validMessageId = state._id + DEFAULT_VALID_MESSAGE_ID_SUFFIX;
-			state._invalidMessageId =
+		if (state._id) {
+			const messageId = state._id + DEFAULT_MESSAGE_ID_SUFFIX;
+			const validMessageId = state._id + DEFAULT_VALID_MESSAGE_ID_SUFFIX;
+			const invalidMessageId =
 				state._id + DEFAULT_INVALID_MESSAGE_ID_SUFFIX;
+			state._messageId = messageId;
+			state._validMessageId = validMessageId;
+			state._invalidMessageId = invalidMessageId;
+
+			state._descByIds = [
+				messageId,
+				validMessageId,
+				invalidMessageId
+			].join(' ');
 		}
-	}, [state._id, state.initialized]);
+	}, [state._id]);
 
-	onUpdate(() => {
-		const descByIds = [state._validMessageId, state._invalidMessageId];
-		if (props.message) {
-			descByIds.push(state._messageId);
-		}
-		state._descByIds = descByIds.join(' ');
-	}, [
-		props.message,
-		state._messageId,
-		state._validMessageId,
-		state._invalidMessageId
-	]);
-	// jscpd:ignore-end
-
-	// TODO we have to check how to update on every change..
 	onUpdate(() => {
 		if (state.initialized && document && state._id) {
 			const checkboxElement = document?.getElementById(
@@ -124,6 +122,7 @@ export default function DBCheckbox(props: DBCheckboxProps) {
 			}
 		}
 	}, [state.initialized, props.indeterminate, props.checked]);
+	// jscpd:ignore-end
 
 	return (
 		<div
diff --git a/packages/components/src/components/input/input.lite.tsx b/packages/components/src/components/input/input.lite.tsx
index 4d6533297c0..16e2743af02 100644
--- a/packages/components/src/components/input/input.lite.tsx
+++ b/packages/components/src/components/input/input.lite.tsx
@@ -10,7 +10,6 @@ import {
 import { cls, uuid } from '../../utils';
 import { DBInputProps, DBInputState } from './model';
 import {
-	DEFAULT_ID,
 	DEFAULT_INVALID_MESSAGE,
 	DEFAULT_INVALID_MESSAGE_ID_SUFFIX,
 	DEFAULT_LABEL,
@@ -35,12 +34,17 @@ export default function DBInput(props: DBInputProps) {
 	const ref = useRef<HTMLInputElement>(null);
 	// jscpd:ignore-start
 	const state = useStore<DBInputState>({
-		_id: DEFAULT_ID,
-		_messageId: DEFAULT_ID + DEFAULT_MESSAGE_ID_SUFFIX,
-		_validMessageId: DEFAULT_ID + DEFAULT_VALID_MESSAGE_ID_SUFFIX,
-		_invalidMessageId: DEFAULT_ID + DEFAULT_INVALID_MESSAGE_ID_SUFFIX,
-		_descByIds: '',
-		_dataListId: DEFAULT_ID,
+		_id: 'input-' + uuid(),
+		_messageId: this._id + DEFAULT_MESSAGE_ID_SUFFIX,
+		_validMessageId: this._id + DEFAULT_VALID_MESSAGE_ID_SUFFIX,
+		_invalidMessageId: this._id + DEFAULT_INVALID_MESSAGE_ID_SUFFIX,
+		_descByIds:
+			this._messageId +
+			' ' +
+			this._validMessageId +
+			' ' +
+			this._invalidMessageId,
+		_dataListId: `datalist-` + uuid(),
 		defaultValues: {
 			label: DEFAULT_LABEL,
 			placeholder: ' '
@@ -96,31 +100,27 @@ export default function DBInput(props: DBInputProps) {
 	});
 
 	onMount(() => {
-		state._id = props.id || 'input-' + uuid();
-		state._dataListId = props.dataListId || `datalist-${uuid()}`;
+		state._id = props.id ?? state._id;
+		state._dataListId = props.dataListId ?? state._dataListId;
 	});
 
 	onUpdate(() => {
 		if (state._id) {
-			state._messageId = state._id + DEFAULT_MESSAGE_ID_SUFFIX;
-			state._validMessageId = state._id + DEFAULT_VALID_MESSAGE_ID_SUFFIX;
-			state._invalidMessageId =
+			const messageId = state._id + DEFAULT_MESSAGE_ID_SUFFIX;
+			const validMessageId = state._id + DEFAULT_VALID_MESSAGE_ID_SUFFIX;
+			const invalidMessageId =
 				state._id + DEFAULT_INVALID_MESSAGE_ID_SUFFIX;
-		}
-	}, [state._id]);
+			state._messageId = messageId;
+			state._validMessageId = validMessageId;
+			state._invalidMessageId = invalidMessageId;
 
-	onUpdate(() => {
-		const descByIds = [state._validMessageId, state._invalidMessageId];
-		if (props.message) {
-			descByIds.push(state._messageId);
+			state._descByIds = [
+				messageId,
+				validMessageId,
+				invalidMessageId
+			].join(' ');
 		}
-		state._descByIds = descByIds.join(' ');
-	}, [
-		props.message,
-		state._messageId,
-		state._validMessageId,
-		state._invalidMessageId
-	]);
+	}, [state._id]);
 
 	return (
 		<div
diff --git a/packages/components/src/components/radio/radio.lite.tsx b/packages/components/src/components/radio/radio.lite.tsx
index df02f167ce3..ae794761994 100644
--- a/packages/components/src/components/radio/radio.lite.tsx
+++ b/packages/components/src/components/radio/radio.lite.tsx
@@ -7,7 +7,6 @@ import {
 	useStore
 } from '@builder.io/mitosis';
 import { DBRadioProps, DBRadioState } from './model';
-import { DEFAULT_ID } from '../../shared/constants';
 import { cls, uuid } from '../../utils';
 import { ChangeEvent, InteractionEvent } from '../../shared/model';
 import { handleFrameworkEvent } from '../../utils/form-components';
@@ -21,7 +20,7 @@ export default function DBRadio(props: DBRadioProps) {
 	// jscpd:ignore-start
 	const state = useStore<DBRadioState>({
 		initialized: false,
-		_id: DEFAULT_ID,
+		_id: 'radio-' + uuid(),
 		handleChange: (event: ChangeEvent<HTMLInputElement>) => {
 			if (props.onChange) {
 				props.onChange(event);
@@ -55,7 +54,7 @@ export default function DBRadio(props: DBRadioProps) {
 
 	onMount(() => {
 		state.initialized = true;
-		state._id = props.id || 'radio-' + uuid();
+		state._id = props.id ?? state._id;
 	});
 	// jscpd:ignore-end
 
diff --git a/packages/components/src/components/select/select.lite.tsx b/packages/components/src/components/select/select.lite.tsx
index d9947f50db0..51c22b98ca6 100644
--- a/packages/components/src/components/select/select.lite.tsx
+++ b/packages/components/src/components/select/select.lite.tsx
@@ -10,7 +10,6 @@ import {
 import { DBSelectOptionType, DBSelectProps, DBSelectState } from './model';
 import { cls, uuid } from '../../utils';
 import {
-	DEFAULT_ID,
 	DEFAULT_INVALID_MESSAGE,
 	DEFAULT_INVALID_MESSAGE_ID_SUFFIX,
 	DEFAULT_LABEL,
@@ -31,12 +30,17 @@ export default function DBSelect(props: DBSelectProps) {
 	const ref = useRef<HTMLSelectElement>(null);
 	// jscpd:ignore-start
 	const state = useStore<DBSelectState>({
-		_id: DEFAULT_ID,
-		_messageId: DEFAULT_ID + DEFAULT_MESSAGE_ID_SUFFIX,
-		_validMessageId: DEFAULT_ID + DEFAULT_VALID_MESSAGE_ID_SUFFIX,
-		_invalidMessageId: DEFAULT_ID + DEFAULT_INVALID_MESSAGE_ID_SUFFIX,
-		_descByIds: '',
-		_placeholderId: DEFAULT_ID + DEFAULT_PLACEHOLDER_ID_SUFFIX,
+		_id: 'select-' + uuid(),
+		_messageId: this._id + DEFAULT_MESSAGE_ID_SUFFIX,
+		_validMessageId: this._id + DEFAULT_VALID_MESSAGE_ID_SUFFIX,
+		_invalidMessageId: this._id + DEFAULT_INVALID_MESSAGE_ID_SUFFIX,
+		_descByIds:
+			this._messageId +
+			' ' +
+			this._validMessageId +
+			' ' +
+			this._invalidMessageId,
+		_placeholderId: this._id + DEFAULT_PLACEHOLDER_ID_SUFFIX,
 		handleClick: (event: ClickEvent<HTMLSelectElement>) => {
 			if (props.onClick) {
 				props.onClick(event);
@@ -87,31 +91,28 @@ export default function DBSelect(props: DBSelectProps) {
 	});
 
 	onMount(() => {
-		state._id = props.id || 'select-' + uuid();
+		state._id = props.id || state._id;
 	});
 
 	onUpdate(() => {
 		if (state._id) {
-			state._placeholderId = state._id + DEFAULT_PLACEHOLDER_ID_SUFFIX;
-			state._messageId = state._id + DEFAULT_MESSAGE_ID_SUFFIX;
-			state._validMessageId = state._id + DEFAULT_VALID_MESSAGE_ID_SUFFIX;
-			state._invalidMessageId =
+			const messageId = state._id + DEFAULT_MESSAGE_ID_SUFFIX;
+			const validMessageId = state._id + DEFAULT_VALID_MESSAGE_ID_SUFFIX;
+			const invalidMessageId =
 				state._id + DEFAULT_INVALID_MESSAGE_ID_SUFFIX;
-		}
-	}, [state._id]);
+			const placeholderId = state._id + DEFAULT_PLACEHOLDER_ID_SUFFIX;
+			state._messageId = messageId;
+			state._validMessageId = validMessageId;
+			state._invalidMessageId = invalidMessageId;
 
-	onUpdate(() => {
-		const descByIds = [state._validMessageId, state._invalidMessageId];
-		if (props.message) {
-			descByIds.push(state._messageId);
+			state._descByIds = [
+				messageId,
+				validMessageId,
+				invalidMessageId,
+				placeholderId
+			].join(' ');
 		}
-		state._descByIds = descByIds.join(' ');
-	}, [
-		props.message,
-		state._messageId,
-		state._validMessageId,
-		state._invalidMessageId
-	]);
+	}, [state._id]);
 
 	return (
 		<div
diff --git a/packages/components/src/components/textarea/textarea.lite.tsx b/packages/components/src/components/textarea/textarea.lite.tsx
index 6a15c585255..2e052da8689 100644
--- a/packages/components/src/components/textarea/textarea.lite.tsx
+++ b/packages/components/src/components/textarea/textarea.lite.tsx
@@ -10,7 +10,6 @@ import { DBTextareaProps, DBTextareaState } from './model';
 import { DBInfotext } from '../infotext';
 import { cls, uuid } from '../../utils';
 import {
-	DEFAULT_ID,
 	DEFAULT_INVALID_MESSAGE,
 	DEFAULT_INVALID_MESSAGE_ID_SUFFIX,
 	DEFAULT_LABEL,
@@ -29,11 +28,16 @@ export default function DBTextarea(props: DBTextareaProps) {
 	const ref = useRef<HTMLTextAreaElement>(null);
 	// jscpd:ignore-start
 	const state = useStore<DBTextareaState>({
-		_id: DEFAULT_ID,
-		_messageId: DEFAULT_ID + DEFAULT_MESSAGE_ID_SUFFIX,
-		_validMessageId: DEFAULT_ID + DEFAULT_VALID_MESSAGE_ID_SUFFIX,
-		_invalidMessageId: DEFAULT_ID + DEFAULT_INVALID_MESSAGE_ID_SUFFIX,
-		_descByIds: '',
+		_id: 'textarea-' + uuid(),
+		_messageId: this._id + DEFAULT_MESSAGE_ID_SUFFIX,
+		_validMessageId: this._id + DEFAULT_VALID_MESSAGE_ID_SUFFIX,
+		_invalidMessageId: this._id + DEFAULT_INVALID_MESSAGE_ID_SUFFIX,
+		_descByIds:
+			this._messageId +
+			' ' +
+			this._validMessageId +
+			' ' +
+			this._invalidMessageId,
 		defaultValues: {
 			label: DEFAULT_LABEL,
 			placeholder: ' ',
@@ -90,30 +94,26 @@ export default function DBTextarea(props: DBTextareaProps) {
 	});
 
 	onMount(() => {
-		state._id = props.id || 'textarea-' + uuid();
+		state._id = props.id || state._id;
 	});
 
 	onUpdate(() => {
 		if (state._id) {
-			state._messageId = state._id + DEFAULT_MESSAGE_ID_SUFFIX;
-			state._validMessageId = state._id + DEFAULT_VALID_MESSAGE_ID_SUFFIX;
-			state._invalidMessageId =
+			const messageId = state._id + DEFAULT_MESSAGE_ID_SUFFIX;
+			const validMessageId = state._id + DEFAULT_VALID_MESSAGE_ID_SUFFIX;
+			const invalidMessageId =
 				state._id + DEFAULT_INVALID_MESSAGE_ID_SUFFIX;
-		}
-	}, [state._id]);
+			state._messageId = messageId;
+			state._validMessageId = validMessageId;
+			state._invalidMessageId = invalidMessageId;
 
-	onUpdate(() => {
-		const descByIds = [state._validMessageId, state._invalidMessageId];
-		if (props.message) {
-			descByIds.push(state._messageId);
+			state._descByIds = [
+				messageId,
+				validMessageId,
+				invalidMessageId
+			].join(' ');
 		}
-		state._descByIds = descByIds.join(' ');
-	}, [
-		props.message,
-		state._messageId,
-		state._validMessageId,
-		state._invalidMessageId
-	]);
+	}, [state._id]);
 
 	return (
 		<div

From 51c14bf6f75a47784891a3a2995696982b5909ff Mon Sep 17 00:00:00 2001
From: Nicolas Merget <nicolas.merget@deutschebahn.com>
Date: Tue, 30 Apr 2024 16:43:27 +0200
Subject: [PATCH 02/29] fix: a11y issue for switch

---
 packages/components/src/components/switch/switch.lite.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/components/switch/switch.lite.tsx b/packages/components/src/components/switch/switch.lite.tsx
index f4df30ce26b..318a1b1e012 100644
--- a/packages/components/src/components/switch/switch.lite.tsx
+++ b/packages/components/src/components/switch/switch.lite.tsx
@@ -14,7 +14,7 @@ export default function DBSwitch(props: DBSwitchProps) {
 	const ref = useRef<HTMLInputElement>(null);
 	// jscpd:ignore-start
 	const state = useStore<DBSwitchState>({
-		_id: DEFAULT_ID,
+		_id: 'switch-' + uuid(),
 		initialized: false,
 		handleChange: (event: ChangeEvent<HTMLInputElement>) => {
 			if (props.onChange) {
@@ -47,7 +47,7 @@ export default function DBSwitch(props: DBSwitchProps) {
 	});
 
 	onMount(() => {
-		state._id = props.id || 'switch-' + uuid();
+		state._id = props.id || state._id;
 	});
 	// jscpd:ignore-end
 

From dabcf9427db9934df6234f561a4f2beceb86f03e Mon Sep 17 00:00:00 2001
From: Nicolas Merget <nicolas.merget@deutschebahn.com>
Date: Wed, 8 May 2024 16:55:19 +0200
Subject: [PATCH 03/29] fix: issue from PR

---
 .../src/components/checkbox/checkbox.lite.tsx | 27 ++++++++-------
 .../src/components/input/input.lite.tsx       | 30 +++++++++-------
 .../src/components/select/select.lite.tsx     | 34 ++++++++++---------
 .../src/components/textarea/textarea.lite.tsx | 29 +++++++++-------
 4 files changed, 66 insertions(+), 54 deletions(-)

diff --git a/packages/components/src/components/checkbox/checkbox.lite.tsx b/packages/components/src/components/checkbox/checkbox.lite.tsx
index 6fad8cbe9b5..a982f0e71a2 100644
--- a/packages/components/src/components/checkbox/checkbox.lite.tsx
+++ b/packages/components/src/components/checkbox/checkbox.lite.tsx
@@ -32,13 +32,7 @@ export default function DBCheckbox(props: DBCheckboxProps) {
 		_messageId: this._id + DEFAULT_MESSAGE_ID_SUFFIX,
 		_validMessageId: this._id + DEFAULT_VALID_MESSAGE_ID_SUFFIX,
 		_invalidMessageId: this._id + DEFAULT_INVALID_MESSAGE_ID_SUFFIX,
-		_descByIds:
-			this._messageId +
-			' ' +
-			this._validMessageId +
-			' ' +
-			this._invalidMessageId,
-
+		_descByIds: this._messageId,
 		handleChange: (event: ChangeEvent<HTMLInputElement>) => {
 			if (props.onChange) {
 				props.onChange(event);
@@ -48,6 +42,19 @@ export default function DBCheckbox(props: DBCheckboxProps) {
 				props.change(event);
 			}
 			handleFrameworkEvent(this, event, 'checked');
+
+			if (!ref?.validity.valid || props.customValidity === 'invalid') {
+				state._descByIds = state._invalidMessageId;
+			} else if (
+				props.customValidity === 'valid' ||
+				(ref?.validity.valid && props.required)
+			) {
+				state._descByIds = state._validMessageId;
+			} else if (props.message) {
+				state._descByIds = state._messageId;
+			} else {
+				state._descByIds = '';
+			}
 		},
 		handleBlur: (event: InteractionEvent<HTMLInputElement>) => {
 			if (props.onBlur) {
@@ -93,12 +100,6 @@ export default function DBCheckbox(props: DBCheckboxProps) {
 			state._messageId = messageId;
 			state._validMessageId = validMessageId;
 			state._invalidMessageId = invalidMessageId;
-
-			state._descByIds = [
-				messageId,
-				validMessageId,
-				invalidMessageId
-			].join(' ');
 		}
 	}, [state._id]);
 
diff --git a/packages/components/src/components/input/input.lite.tsx b/packages/components/src/components/input/input.lite.tsx
index 16e2743af02..2693b1ff5ba 100644
--- a/packages/components/src/components/input/input.lite.tsx
+++ b/packages/components/src/components/input/input.lite.tsx
@@ -38,13 +38,8 @@ export default function DBInput(props: DBInputProps) {
 		_messageId: this._id + DEFAULT_MESSAGE_ID_SUFFIX,
 		_validMessageId: this._id + DEFAULT_VALID_MESSAGE_ID_SUFFIX,
 		_invalidMessageId: this._id + DEFAULT_INVALID_MESSAGE_ID_SUFFIX,
-		_descByIds:
-			this._messageId +
-			' ' +
-			this._validMessageId +
-			' ' +
-			this._invalidMessageId,
 		_dataListId: `datalist-` + uuid(),
+		_descByIds: this._messageId,
 		defaultValues: {
 			label: DEFAULT_LABEL,
 			placeholder: ' '
@@ -57,6 +52,23 @@ export default function DBInput(props: DBInputProps) {
 			if (props.input) {
 				props.input(event);
 			}
+
+			if (!ref?.validity.valid || props.customValidity === 'invalid') {
+				state._descByIds = state._invalidMessageId;
+			} else if (
+				props.customValidity === 'valid' ||
+				(ref?.validity.valid &&
+					(props.required ||
+						props.minLength ||
+						props.maxLength ||
+						props.pattern))
+			) {
+				state._descByIds = state._validMessageId;
+			} else if (props.message) {
+				state._descByIds = state._messageId;
+			} else {
+				state._descByIds = '';
+			}
 		},
 		handleChange: (event: ChangeEvent<HTMLInputElement>) => {
 			if (props.onChange) {
@@ -113,12 +125,6 @@ export default function DBInput(props: DBInputProps) {
 			state._messageId = messageId;
 			state._validMessageId = validMessageId;
 			state._invalidMessageId = invalidMessageId;
-
-			state._descByIds = [
-				messageId,
-				validMessageId,
-				invalidMessageId
-			].join(' ');
 		}
 	}, [state._id]);
 
diff --git a/packages/components/src/components/select/select.lite.tsx b/packages/components/src/components/select/select.lite.tsx
index 51c22b98ca6..57dda666571 100644
--- a/packages/components/src/components/select/select.lite.tsx
+++ b/packages/components/src/components/select/select.lite.tsx
@@ -34,13 +34,8 @@ export default function DBSelect(props: DBSelectProps) {
 		_messageId: this._id + DEFAULT_MESSAGE_ID_SUFFIX,
 		_validMessageId: this._id + DEFAULT_VALID_MESSAGE_ID_SUFFIX,
 		_invalidMessageId: this._id + DEFAULT_INVALID_MESSAGE_ID_SUFFIX,
-		_descByIds:
-			this._messageId +
-			' ' +
-			this._validMessageId +
-			' ' +
-			this._invalidMessageId,
 		_placeholderId: this._id + DEFAULT_PLACEHOLDER_ID_SUFFIX,
+		_descByIds: this._placeholderId + ' ' + this._messageId,
 		handleClick: (event: ClickEvent<HTMLSelectElement>) => {
 			if (props.onClick) {
 				props.onClick(event);
@@ -56,6 +51,21 @@ export default function DBSelect(props: DBSelectProps) {
 			}
 
 			handleFrameworkEvent(this, event);
+
+			if (!ref?.validity.valid || props.customValidity === 'invalid') {
+				state._descByIds =
+					this._placeholderId + ' ' + state._invalidMessageId;
+			} else if (
+				props.customValidity === 'valid' ||
+				(ref?.validity.valid && props.required)
+			) {
+				state._descByIds =
+					this._placeholderId + ' ' + state._validMessageId;
+			} else if (props.message) {
+				state._descByIds = this._placeholderId + ' ' + state._messageId;
+			} else {
+				state._descByIds = this._placeholderId;
+			}
 		},
 		handleBlur: (event: InteractionEvent<HTMLSelectElement>) => {
 			if (props.onBlur) {
@@ -104,13 +114,7 @@ export default function DBSelect(props: DBSelectProps) {
 			state._messageId = messageId;
 			state._validMessageId = validMessageId;
 			state._invalidMessageId = invalidMessageId;
-
-			state._descByIds = [
-				messageId,
-				validMessageId,
-				invalidMessageId,
-				placeholderId
-			].join(' ');
+			state._invalidMessageId = placeholderId;
 		}
 	}, [state._id]);
 
@@ -142,9 +146,7 @@ export default function DBSelect(props: DBSelectProps) {
 				onFocus={(event: InteractionEvent<HTMLSelectElement>) =>
 					state.handleFocus(event)
 				}
-				aria-describedby={
-					(props.message && state._messageId) || state._placeholderId
-				}>
+				aria-describedby={state._descByIds}>
 				{/* Empty option for floating label */}
 				<option hidden></option>
 				<Show when={props.options}>
diff --git a/packages/components/src/components/textarea/textarea.lite.tsx b/packages/components/src/components/textarea/textarea.lite.tsx
index 2e052da8689..a63136a996d 100644
--- a/packages/components/src/components/textarea/textarea.lite.tsx
+++ b/packages/components/src/components/textarea/textarea.lite.tsx
@@ -32,12 +32,7 @@ export default function DBTextarea(props: DBTextareaProps) {
 		_messageId: this._id + DEFAULT_MESSAGE_ID_SUFFIX,
 		_validMessageId: this._id + DEFAULT_VALID_MESSAGE_ID_SUFFIX,
 		_invalidMessageId: this._id + DEFAULT_INVALID_MESSAGE_ID_SUFFIX,
-		_descByIds:
-			this._messageId +
-			' ' +
-			this._validMessageId +
-			' ' +
-			this._invalidMessageId,
+		_descByIds: this._messageId,
 		defaultValues: {
 			label: DEFAULT_LABEL,
 			placeholder: ' ',
@@ -51,6 +46,20 @@ export default function DBTextarea(props: DBTextareaProps) {
 			if (props.input) {
 				props.input(event);
 			}
+
+			if (!ref?.validity.valid || props.customValidity === 'invalid') {
+				state._descByIds = state._invalidMessageId;
+			} else if (
+				props.customValidity === 'valid' ||
+				(ref?.validity.valid &&
+					(props.required || props.minLength || props.maxLength))
+			) {
+				state._descByIds = state._validMessageId;
+			} else if (props.message) {
+				state._descByIds = state._messageId;
+			} else {
+				state._descByIds = '';
+			}
 		},
 		handleChange: (event: ChangeEvent<HTMLTextAreaElement>) => {
 			if (props.onChange) {
@@ -106,12 +115,6 @@ export default function DBTextarea(props: DBTextareaProps) {
 			state._messageId = messageId;
 			state._validMessageId = validMessageId;
 			state._invalidMessageId = invalidMessageId;
-
-			state._descByIds = [
-				messageId,
-				validMessageId,
-				invalidMessageId
-			].join(' ');
 		}
 	}, [state._id]);
 
@@ -152,7 +155,7 @@ export default function DBTextarea(props: DBTextareaProps) {
 					state.handleFocus(event)
 				}
 				value={props.value}
-				aria-describedby={props.message && state._messageId}
+				aria-describedby={state._descByIds}
 				placeholder={
 					props.placeholder ?? state.defaultValues.placeholder
 				}

From 28d00c9ce3d20dbfc94ae286f47a0f060420e282 Mon Sep 17 00:00:00 2001
From: Nicolas Merget <nicolas.merget@deutschebahn.com>
Date: Wed, 8 May 2024 17:24:12 +0200
Subject: [PATCH 04/29] fix: issue with vue

---
 packages/components/src/components/checkbox/checkbox.lite.tsx | 2 +-
 packages/components/src/components/input/input.lite.tsx       | 2 +-
 packages/components/src/components/textarea/textarea.lite.tsx | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/components/src/components/checkbox/checkbox.lite.tsx b/packages/components/src/components/checkbox/checkbox.lite.tsx
index a982f0e71a2..1750b3c2315 100644
--- a/packages/components/src/components/checkbox/checkbox.lite.tsx
+++ b/packages/components/src/components/checkbox/checkbox.lite.tsx
@@ -32,7 +32,7 @@ export default function DBCheckbox(props: DBCheckboxProps) {
 		_messageId: this._id + DEFAULT_MESSAGE_ID_SUFFIX,
 		_validMessageId: this._id + DEFAULT_VALID_MESSAGE_ID_SUFFIX,
 		_invalidMessageId: this._id + DEFAULT_INVALID_MESSAGE_ID_SUFFIX,
-		_descByIds: this._messageId,
+		_descByIds: `${this._messageId}`,
 		handleChange: (event: ChangeEvent<HTMLInputElement>) => {
 			if (props.onChange) {
 				props.onChange(event);
diff --git a/packages/components/src/components/input/input.lite.tsx b/packages/components/src/components/input/input.lite.tsx
index 2693b1ff5ba..c8aa974b45f 100644
--- a/packages/components/src/components/input/input.lite.tsx
+++ b/packages/components/src/components/input/input.lite.tsx
@@ -39,7 +39,7 @@ export default function DBInput(props: DBInputProps) {
 		_validMessageId: this._id + DEFAULT_VALID_MESSAGE_ID_SUFFIX,
 		_invalidMessageId: this._id + DEFAULT_INVALID_MESSAGE_ID_SUFFIX,
 		_dataListId: `datalist-` + uuid(),
-		_descByIds: this._messageId,
+		_descByIds: `${this._messageId}`,
 		defaultValues: {
 			label: DEFAULT_LABEL,
 			placeholder: ' '
diff --git a/packages/components/src/components/textarea/textarea.lite.tsx b/packages/components/src/components/textarea/textarea.lite.tsx
index a63136a996d..ec2404b8702 100644
--- a/packages/components/src/components/textarea/textarea.lite.tsx
+++ b/packages/components/src/components/textarea/textarea.lite.tsx
@@ -32,7 +32,7 @@ export default function DBTextarea(props: DBTextareaProps) {
 		_messageId: this._id + DEFAULT_MESSAGE_ID_SUFFIX,
 		_validMessageId: this._id + DEFAULT_VALID_MESSAGE_ID_SUFFIX,
 		_invalidMessageId: this._id + DEFAULT_INVALID_MESSAGE_ID_SUFFIX,
-		_descByIds: this._messageId,
+		_descByIds: `${this._messageId}`,
 		defaultValues: {
 			label: DEFAULT_LABEL,
 			placeholder: ' ',

From 91b2e607811613599d91d3ef771eb0f24bb009cf Mon Sep 17 00:00:00 2001
From: Nicolas Merget <104347736+nmerget@users.noreply.github.com>
Date: Fri, 10 May 2024 08:57:51 +0200
Subject: [PATCH 05/29] Update
 packages/components/src/components/select/select.lite.tsx

Co-authored-by: Maximilian Franzke <787658+mfranzke@users.noreply.github.com>
---
 packages/components/src/components/select/select.lite.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/components/select/select.lite.tsx b/packages/components/src/components/select/select.lite.tsx
index 57dda666571..3b4e54f04a5 100644
--- a/packages/components/src/components/select/select.lite.tsx
+++ b/packages/components/src/components/select/select.lite.tsx
@@ -114,7 +114,7 @@ export default function DBSelect(props: DBSelectProps) {
 			state._messageId = messageId;
 			state._validMessageId = validMessageId;
 			state._invalidMessageId = invalidMessageId;
-			state._invalidMessageId = placeholderId;
+			state._placeholderId = placeholderId;
 		}
 	}, [state._id]);
 

From ded12f94a398d706b5cf7ca16a8e68ae54d63d25 Mon Sep 17 00:00:00 2001
From: Maximilian Franzke <787658+mfranzke@users.noreply.github.com>
Date: Fri, 10 May 2024 09:19:30 +0200
Subject: [PATCH 06/29] Update checkbox.lite.tsx

---
 packages/components/src/components/checkbox/checkbox.lite.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/components/src/components/checkbox/checkbox.lite.tsx b/packages/components/src/components/checkbox/checkbox.lite.tsx
index 1750b3c2315..4245db326ef 100644
--- a/packages/components/src/components/checkbox/checkbox.lite.tsx
+++ b/packages/components/src/components/checkbox/checkbox.lite.tsx
@@ -32,6 +32,7 @@ export default function DBCheckbox(props: DBCheckboxProps) {
 		_messageId: this._id + DEFAULT_MESSAGE_ID_SUFFIX,
 		_validMessageId: this._id + DEFAULT_VALID_MESSAGE_ID_SUFFIX,
 		_invalidMessageId: this._id + DEFAULT_INVALID_MESSAGE_ID_SUFFIX,
+		// 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: `${this._messageId}`,
 		handleChange: (event: ChangeEvent<HTMLInputElement>) => {
 			if (props.onChange) {

From 286eae3f172b71df853ced1705f79ebdec51b98f Mon Sep 17 00:00:00 2001
From: Maximilian Franzke <787658+mfranzke@users.noreply.github.com>
Date: Fri, 10 May 2024 09:19:44 +0200
Subject: [PATCH 07/29] Update input.lite.tsx

---
 packages/components/src/components/input/input.lite.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/components/src/components/input/input.lite.tsx b/packages/components/src/components/input/input.lite.tsx
index c8aa974b45f..1af6fa70a86 100644
--- a/packages/components/src/components/input/input.lite.tsx
+++ b/packages/components/src/components/input/input.lite.tsx
@@ -39,6 +39,7 @@ export default function DBInput(props: DBInputProps) {
 		_validMessageId: this._id + DEFAULT_VALID_MESSAGE_ID_SUFFIX,
 		_invalidMessageId: this._id + DEFAULT_INVALID_MESSAGE_ID_SUFFIX,
 		_dataListId: `datalist-` + uuid(),
+		// 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: `${this._messageId}`,
 		defaultValues: {
 			label: DEFAULT_LABEL,

From 524e89227888c27185ea6eef68151948b78a55e1 Mon Sep 17 00:00:00 2001
From: Maximilian Franzke <787658+mfranzke@users.noreply.github.com>
Date: Fri, 10 May 2024 09:19:53 +0200
Subject: [PATCH 08/29] Update textarea.lite.tsx

---
 packages/components/src/components/textarea/textarea.lite.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/components/src/components/textarea/textarea.lite.tsx b/packages/components/src/components/textarea/textarea.lite.tsx
index ec2404b8702..38bff5d6487 100644
--- a/packages/components/src/components/textarea/textarea.lite.tsx
+++ b/packages/components/src/components/textarea/textarea.lite.tsx
@@ -32,6 +32,7 @@ export default function DBTextarea(props: DBTextareaProps) {
 		_messageId: this._id + DEFAULT_MESSAGE_ID_SUFFIX,
 		_validMessageId: this._id + DEFAULT_VALID_MESSAGE_ID_SUFFIX,
 		_invalidMessageId: this._id + DEFAULT_INVALID_MESSAGE_ID_SUFFIX,
+		// 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: `${this._messageId}`,
 		defaultValues: {
 			label: DEFAULT_LABEL,

From 4ad533c456b42cddf38a43923fe79bb6d703631e Mon Sep 17 00:00:00 2001
From: Maximilian Franzke <787658+mfranzke@users.noreply.github.com>
Date: Fri, 10 May 2024 09:20:34 +0200
Subject: [PATCH 09/29] Update input.lite.tsx

---
 packages/components/src/components/input/input.lite.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/components/input/input.lite.tsx b/packages/components/src/components/input/input.lite.tsx
index 1af6fa70a86..e3e929ede32 100644
--- a/packages/components/src/components/input/input.lite.tsx
+++ b/packages/components/src/components/input/input.lite.tsx
@@ -38,7 +38,7 @@ export default function DBInput(props: DBInputProps) {
 		_messageId: this._id + DEFAULT_MESSAGE_ID_SUFFIX,
 		_validMessageId: this._id + DEFAULT_VALID_MESSAGE_ID_SUFFIX,
 		_invalidMessageId: this._id + DEFAULT_INVALID_MESSAGE_ID_SUFFIX,
-		_dataListId: `datalist-` + uuid(),
+		_dataListId: 'datalist-' + uuid(),
 		// 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: `${this._messageId}`,
 		defaultValues: {

From 613e97141a097fa3fb2cba778f62f36511bafc3f Mon Sep 17 00:00:00 2001
From: Nicolas Merget <nicolas.merget@deutschebahn.com>
Date: Fri, 10 May 2024 10:44:20 +0200
Subject: [PATCH 10/29] fix: issues from PR

---
 packages/components/src/components/input/input.lite.tsx | 3 ++-
 packages/components/src/shared/constants.ts             | 1 +
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/components/src/components/input/input.lite.tsx b/packages/components/src/components/input/input.lite.tsx
index c8aa974b45f..62844bafdb0 100644
--- a/packages/components/src/components/input/input.lite.tsx
+++ b/packages/components/src/components/input/input.lite.tsx
@@ -10,6 +10,7 @@ import {
 import { cls, uuid } from '../../utils';
 import { DBInputProps, DBInputState } from './model';
 import {
+	DEFAULT_DATALIST_ID_SUFFIX,
 	DEFAULT_INVALID_MESSAGE,
 	DEFAULT_INVALID_MESSAGE_ID_SUFFIX,
 	DEFAULT_LABEL,
@@ -38,7 +39,7 @@ export default function DBInput(props: DBInputProps) {
 		_messageId: this._id + DEFAULT_MESSAGE_ID_SUFFIX,
 		_validMessageId: this._id + DEFAULT_VALID_MESSAGE_ID_SUFFIX,
 		_invalidMessageId: this._id + DEFAULT_INVALID_MESSAGE_ID_SUFFIX,
-		_dataListId: `datalist-` + uuid(),
+		_dataListId: this._id + DEFAULT_DATALIST_ID_SUFFIX,
 		_descByIds: `${this._messageId}`,
 		defaultValues: {
 			label: DEFAULT_LABEL,
diff --git a/packages/components/src/shared/constants.ts b/packages/components/src/shared/constants.ts
index 682cd0b3e76..7307b53366a 100644
--- a/packages/components/src/shared/constants.ts
+++ b/packages/components/src/shared/constants.ts
@@ -5,6 +5,7 @@ export const DEFAULT_MESSAGE_ID_SUFFIX: string = '-message';
 export const DEFAULT_VALID_MESSAGE_ID_SUFFIX: string = '-valid-message';
 export const DEFAULT_INVALID_MESSAGE_ID_SUFFIX: string = '-invalid-message';
 export const DEFAULT_PLACEHOLDER_ID_SUFFIX: string = '-placeholder';
+export const DEFAULT_DATALIST_ID_SUFFIX: string = '-placeholder';
 
 export const DEFAULT_VALID_MESSAGE: string = 'TODO: Add a validMessage';
 export const DEFAULT_INVALID_MESSAGE: string = 'TODO: Add an invalidMessage';

From 315e2e0a2308d501bbceb18c55d2a7a954d61a03 Mon Sep 17 00:00:00 2001
From: Nicolas Merget <nicolas.merget@deutschebahn.com>
Date: Fri, 10 May 2024 15:16:04 +0200
Subject: [PATCH 11/29] fix: issues with form-components

---
 .../components/scripts/post-build/angular.js  |  8 ++
 .../scripts/post-build/components.js          |  7 ++
 packages/components/scripts/post-build/vue.js | 14 ++++
 .../src/components/checkbox/checkbox.lite.tsx | 22 +++---
 .../src/components/checkbox/model.ts          | 16 ++--
 .../src/components/input/input.lite.tsx       | 54 ++++++-------
 .../components/src/components/input/model.ts  |  4 +-
 .../components/src/components/select/model.ts | 16 +++-
 .../src/components/select/select.lite.tsx     | 75 +++++++++++++------
 .../src/components/textarea/model.ts          |  6 +-
 .../src/components/textarea/textarea.lite.tsx | 53 ++++++-------
 packages/components/src/shared/model.ts       |  6 +-
 .../checkbox/checkbox.component.html          |  1 -
 .../src/components/select/index.tsx           | 35 +++++----
 showcases/shared/select.json                  |  6 +-
 .../src/components/textarea/Textarea.vue      |  2 +-
 16 files changed, 196 insertions(+), 129 deletions(-)

diff --git a/packages/components/scripts/post-build/angular.js b/packages/components/scripts/post-build/angular.js
index 58fd1d6a614..5bb1364a035 100644
--- a/packages/components/scripts/post-build/angular.js
+++ b/packages/components/scripts/post-build/angular.js
@@ -17,6 +17,14 @@ const changeFile = (component, input) => {
 				return line.replace(': ElementRef', ': ElementRef | undefined');
 			}
 
+			// We need to remove "nativeElement" in template part, because it only exists in ts
+			if (
+				line.includes('ref.nativeElement') &&
+				(line.includes('{{') || line.includes('}}'))
+			) {
+				return line.replace('.nativeElement', '');
+			}
+
 			if (line.includes('.nativeElement') && !line.includes('=')) {
 				return line.replace('.nativeElement', '?.nativeElement');
 			}
diff --git a/packages/components/scripts/post-build/components.js b/packages/components/scripts/post-build/components.js
index 385ee0eed31..a894e0e6f23 100644
--- a/packages/components/scripts/post-build/components.js
+++ b/packages/components/scripts/post-build/components.js
@@ -153,6 +153,13 @@ const getComponents = () => [
 
 	{
 		name: 'select',
+		overwrites: {
+			react: [
+				// React not allowing selected for options
+				{ from: 'selected={option.selected}', to: '' },
+				{ from: 'selected={optgroupOption.selected}', to: '' }
+			]
+		},
 		config: {
 			vue: {
 				vModel: [{ modelValue: 'value', binding: ':value' }]
diff --git a/packages/components/scripts/post-build/vue.js b/packages/components/scripts/post-build/vue.js
index 5c049d5697a..7ae46779655 100644
--- a/packages/components/scripts/post-build/vue.js
+++ b/packages/components/scripts/post-build/vue.js
@@ -64,6 +64,20 @@ module.exports = (tmp) => {
 				}
 			];
 
+			// This is a workaround for valid/invalidMessages resetting values
+			[
+				'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;'
+				});
+			});
+
 			Replace.sync({
 				files: vueFile,
 				processor(input) {
diff --git a/packages/components/src/components/checkbox/checkbox.lite.tsx b/packages/components/src/components/checkbox/checkbox.lite.tsx
index 4245db326ef..98faf63fb8f 100644
--- a/packages/components/src/components/checkbox/checkbox.lite.tsx
+++ b/packages/components/src/components/checkbox/checkbox.lite.tsx
@@ -32,8 +32,7 @@ export default function DBCheckbox(props: DBCheckboxProps) {
 		_messageId: this._id + DEFAULT_MESSAGE_ID_SUFFIX,
 		_validMessageId: this._id + DEFAULT_VALID_MESSAGE_ID_SUFFIX,
 		_invalidMessageId: this._id + DEFAULT_INVALID_MESSAGE_ID_SUFFIX,
-		// 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: `${this._messageId}`,
+		_descByIds: '',
 		handleChange: (event: ChangeEvent<HTMLInputElement>) => {
 			if (props.onChange) {
 				props.onChange(event);
@@ -78,12 +77,9 @@ export default function DBCheckbox(props: DBCheckboxProps) {
 		getValidMessage: () => {
 			return props.validMessage || DEFAULT_VALID_MESSAGE;
 		},
+
 		getInvalidMessage: () => {
-			return (
-				props.invalidMessage ||
-				ref?.validationMessage ||
-				DEFAULT_INVALID_MESSAGE
-			);
+			return '';
 		}
 	});
 
@@ -101,6 +97,10 @@ export default function DBCheckbox(props: DBCheckboxProps) {
 			state._messageId = messageId;
 			state._validMessageId = validMessageId;
 			state._invalidMessageId = invalidMessageId;
+
+			if (props.message) {
+				state._descByIds = messageId;
+			}
 		}
 	}, [state._id]);
 
@@ -120,6 +120,8 @@ export default function DBCheckbox(props: DBCheckboxProps) {
 					// It has no accessibility or UX implications. (https://mui.com/material-ui/react-checkbox/)
 					checkboxElement.indeterminate = props.indeterminate;
 				}
+
+				state.initialized = false;
 			}
 		}
 	}, [state.initialized, props.indeterminate, props.checked]);
@@ -172,14 +174,16 @@ export default function DBCheckbox(props: DBCheckboxProps) {
 				id={state._validMessageId}
 				size="small"
 				semantic="successful">
-				{state.getValidMessage()}
+				{props.validMessage ?? DEFAULT_VALID_MESSAGE}
 			</DBInfotext>
 
 			<DBInfotext
 				id={state._invalidMessageId}
 				size="small"
 				semantic="critical">
-				{state.getInvalidMessage()}
+				{props.invalidMessage ??
+					ref?.validationMessage ??
+					DEFAULT_INVALID_MESSAGE}
 			</DBInfotext>
 		</div>
 	);
diff --git a/packages/components/src/components/checkbox/model.ts b/packages/components/src/components/checkbox/model.ts
index 7a6f324ffac..27d2af17afe 100644
--- a/packages/components/src/components/checkbox/model.ts
+++ b/packages/components/src/components/checkbox/model.ts
@@ -1,16 +1,15 @@
 import {
+	ChangeEventProps,
+	ChangeEventState,
 	FocusEventProps,
 	FocusEventState,
-	ChangeEventState,
-	ChangeEventProps,
-	GlobalProps,
-	GlobalState,
+	FormCheckProps,
+	FormMessageProps,
 	FormProps,
 	FormState,
-	FormCheckProps,
+	GlobalProps,
+	GlobalState,
 	InitializedState,
-	FormMessageProps,
-	FormMessageState,
 	SizeProps
 } from '../../shared/model';
 
@@ -37,5 +36,4 @@ export type DBCheckboxState = DBCheckboxDefaultState &
 	ChangeEventState<HTMLInputElement> &
 	FocusEventState<HTMLInputElement> &
 	FormState &
-	InitializedState &
-	FormMessageState;
+	InitializedState;
diff --git a/packages/components/src/components/input/input.lite.tsx b/packages/components/src/components/input/input.lite.tsx
index 0f1435ec5b4..f5fa68745f9 100644
--- a/packages/components/src/components/input/input.lite.tsx
+++ b/packages/components/src/components/input/input.lite.tsx
@@ -40,8 +40,8 @@ export default function DBInput(props: DBInputProps) {
 		_validMessageId: this._id + DEFAULT_VALID_MESSAGE_ID_SUFFIX,
 		_invalidMessageId: this._id + DEFAULT_INVALID_MESSAGE_ID_SUFFIX,
 		_dataListId: this._id + DEFAULT_DATALIST_ID_SUFFIX,
-		// 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: `${this._messageId}`,
+		_descByIds: 'none',
+		_value: '',
 		defaultValues: {
 			label: DEFAULT_LABEL,
 			placeholder: ' '
@@ -54,6 +54,17 @@ export default function DBInput(props: DBInputProps) {
 			if (props.input) {
 				props.input(event);
 			}
+		},
+		handleChange: (event: ChangeEvent<HTMLInputElement>) => {
+			if (props.onChange) {
+				props.onChange(event);
+			}
+
+			if (props.change) {
+				props.change(event);
+			}
+
+			handleFrameworkEvent(this, event);
 
 			if (!ref?.validity.valid || props.customValidity === 'invalid') {
 				state._descByIds = state._invalidMessageId;
@@ -69,19 +80,8 @@ export default function DBInput(props: DBInputProps) {
 			} else if (props.message) {
 				state._descByIds = state._messageId;
 			} else {
-				state._descByIds = '';
-			}
-		},
-		handleChange: (event: ChangeEvent<HTMLInputElement>) => {
-			if (props.onChange) {
-				props.onChange(event);
+				state._descByIds = 'none';
 			}
-
-			if (props.change) {
-				props.change(event);
-			}
-
-			handleFrameworkEvent(this, event);
 		},
 		handleBlur: (event: InteractionEvent<HTMLInputElement>) => {
 			if (props.onBlur) {
@@ -100,16 +100,6 @@ export default function DBInput(props: DBInputProps) {
 			if (props.focus) {
 				props.focus(event);
 			}
-		},
-		getValidMessage: () => {
-			return props.validMessage || DEFAULT_VALID_MESSAGE;
-		},
-		getInvalidMessage: () => {
-			return (
-				props.invalidMessage ||
-				ref?.validationMessage ||
-				DEFAULT_INVALID_MESSAGE
-			);
 		}
 	});
 
@@ -127,9 +117,17 @@ export default function DBInput(props: DBInputProps) {
 			state._messageId = messageId;
 			state._validMessageId = validMessageId;
 			state._invalidMessageId = invalidMessageId;
+
+			if (props.message) {
+				state._descByIds = messageId;
+			}
 		}
 	}, [state._id]);
 
+	onUpdate(() => {
+		state._value = props.value;
+	}, [props.value]);
+
 	return (
 		<div
 			class={cls('db-input', props.className)}
@@ -152,7 +150,7 @@ export default function DBInput(props: DBInputProps) {
 				disabled={props.disabled}
 				required={props.required}
 				step={props.step}
-				value={props.value}
+				value={props.value ?? state._value}
 				maxLength={props.maxLength}
 				minLength={props.minLength}
 				max={props.max}
@@ -205,14 +203,16 @@ export default function DBInput(props: DBInputProps) {
 				id={state._validMessageId}
 				size="small"
 				semantic="successful">
-				{state.getValidMessage()}
+				{props.validMessage ?? DEFAULT_VALID_MESSAGE}
 			</DBInfotext>
 
 			<DBInfotext
 				id={state._invalidMessageId}
 				size="small"
 				semantic="critical">
-				{state.getInvalidMessage()}
+				{props.invalidMessage ??
+					ref?.validationMessage ??
+					DEFAULT_INVALID_MESSAGE}
 			</DBInfotext>
 		</div>
 	);
diff --git a/packages/components/src/components/input/model.ts b/packages/components/src/components/input/model.ts
index 075a8e810bf..df2ba2b5a19 100644
--- a/packages/components/src/components/input/model.ts
+++ b/packages/components/src/components/input/model.ts
@@ -4,7 +4,6 @@ import {
 	FocusEventProps,
 	FocusEventState,
 	FormMessageProps,
-	FormMessageState,
 	FormProps,
 	FormState,
 	FormTextProps,
@@ -77,5 +76,4 @@ export type DBInputState = DBInputDefaultState &
 	InputEventState<HTMLInputElement> &
 	ChangeEventState<HTMLInputElement> &
 	FocusEventState<HTMLInputElement> &
-	FormState &
-	FormMessageState;
+	FormState;
diff --git a/packages/components/src/components/select/model.ts b/packages/components/src/components/select/model.ts
index dc60d3dcc5d..6af02821be7 100644
--- a/packages/components/src/components/select/model.ts
+++ b/packages/components/src/components/select/model.ts
@@ -6,12 +6,14 @@ import {
 	FocusEventProps,
 	FocusEventState,
 	FormMessageProps,
-	FormMessageState,
 	FormProps,
 	FormState,
 	GlobalProps,
 	GlobalState,
-	IconProps
+	IconProps,
+	InitializedState,
+	InputEventProps,
+	InputEventState
 } from '../../shared/model';
 
 export interface DBSelectDefaultProps {
@@ -35,9 +37,13 @@ export type DBSelectOptionType = {
 	/**
 	 * Disables this option
 	 */
-	// Disables this option
 	disabled?: boolean;
 
+	/**
+	 * Selects this option
+	 */
+	selected?: boolean;
+
 	/**
 	 * If the value is different from the label you want to show to the user.
 	 */
@@ -59,6 +65,7 @@ export type DBSelectProps = DBSelectDefaultProps &
 	ClickEventProps<HTMLSelectElement> &
 	ChangeEventProps<HTMLSelectElement> &
 	FocusEventProps<HTMLSelectElement> &
+	InputEventProps<HTMLSelectElement> &
 	FormProps &
 	IconProps &
 	FormMessageProps;
@@ -73,5 +80,6 @@ export type DBSelectState = DBSelectDefaultState &
 	ClickEventState<HTMLSelectElement> &
 	ChangeEventState<HTMLSelectElement> &
 	FocusEventState<HTMLSelectElement> &
+	InputEventState<HTMLSelectElement> &
 	FormState &
-	FormMessageState;
+	InitializedState;
diff --git a/packages/components/src/components/select/select.lite.tsx b/packages/components/src/components/select/select.lite.tsx
index 3b4e54f04a5..eab8b0f78fc 100644
--- a/packages/components/src/components/select/select.lite.tsx
+++ b/packages/components/src/components/select/select.lite.tsx
@@ -19,7 +19,12 @@ import {
 	DEFAULT_VALID_MESSAGE_ID_SUFFIX
 } from '../../shared/constants';
 import { DBInfotext } from '../infotext';
-import { ChangeEvent, ClickEvent, InteractionEvent } from '../../shared/model';
+import {
+	ChangeEvent,
+	ClickEvent,
+	InputEvent,
+	InteractionEvent
+} from '../../shared/model';
 import { handleFrameworkEvent } from '../../utils/form-components';
 
 useMetadata({
@@ -35,12 +40,24 @@ export default function DBSelect(props: DBSelectProps) {
 		_validMessageId: this._id + DEFAULT_VALID_MESSAGE_ID_SUFFIX,
 		_invalidMessageId: this._id + DEFAULT_INVALID_MESSAGE_ID_SUFFIX,
 		_placeholderId: this._id + DEFAULT_PLACEHOLDER_ID_SUFFIX,
-		_descByIds: this._placeholderId + ' ' + this._messageId,
+		// 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: 'none',
+		_value: '',
+		initialized: false,
 		handleClick: (event: ClickEvent<HTMLSelectElement>) => {
 			if (props.onClick) {
 				props.onClick(event);
 			}
 		},
+		handleInput: (event: InputEvent<HTMLSelectElement>) => {
+			if (props.onInput) {
+				props.onInput(event);
+			}
+
+			if (props.input) {
+				props.input(event);
+			}
+		},
 		handleChange: (event: ChangeEvent<HTMLSelectElement>) => {
 			if (props.onChange) {
 				props.onChange(event);
@@ -53,18 +70,16 @@ export default function DBSelect(props: DBSelectProps) {
 			handleFrameworkEvent(this, event);
 
 			if (!ref?.validity.valid || props.customValidity === 'invalid') {
-				state._descByIds =
-					this._placeholderId + ' ' + state._invalidMessageId;
+				state._descByIds = state._invalidMessageId;
 			} else if (
 				props.customValidity === 'valid' ||
 				(ref?.validity.valid && props.required)
 			) {
-				state._descByIds =
-					this._placeholderId + ' ' + state._validMessageId;
+				state._descByIds = state._validMessageId;
 			} else if (props.message) {
-				state._descByIds = this._placeholderId + ' ' + state._messageId;
+				state._descByIds = state._messageId;
 			} else {
-				state._descByIds = this._placeholderId;
+				state._descByIds = state._placeholderId;
 			}
 		},
 		handleBlur: (event: InteractionEvent<HTMLSelectElement>) => {
@@ -87,25 +102,16 @@ export default function DBSelect(props: DBSelectProps) {
 		},
 		getOptionLabel: (option: DBSelectOptionType) => {
 			return option.label ?? option.value.toString();
-		},
-		getValidMessage: () => {
-			return props.validMessage || DEFAULT_VALID_MESSAGE;
-		},
-		getInvalidMessage: () => {
-			return (
-				props.invalidMessage ||
-				ref?.validationMessage ||
-				DEFAULT_INVALID_MESSAGE
-			);
 		}
 	});
 
 	onMount(() => {
 		state._id = props.id || state._id;
+		state.initialized = true;
 	});
 
 	onUpdate(() => {
-		if (state._id) {
+		if (state._id && state.initialized) {
 			const messageId = state._id + DEFAULT_MESSAGE_ID_SUFFIX;
 			const validMessageId = state._id + DEFAULT_VALID_MESSAGE_ID_SUFFIX;
 			const invalidMessageId =
@@ -115,8 +121,20 @@ export default function DBSelect(props: DBSelectProps) {
 			state._validMessageId = validMessageId;
 			state._invalidMessageId = invalidMessageId;
 			state._placeholderId = placeholderId;
+
+			if (props.message) {
+				state._descByIds = messageId;
+			} else {
+				state._descByIds = placeholderId;
+			}
+
+			state.initialized = false;
 		}
-	}, [state._id]);
+	}, [state._id, state.initialized]);
+
+	onUpdate(() => {
+		state._value = props.value;
+	}, [props.value]);
 
 	return (
 		<div
@@ -132,8 +150,11 @@ export default function DBSelect(props: DBSelectProps) {
 				disabled={props.disabled}
 				id={state._id}
 				name={props.name}
-				value={props.value}
+				value={props.value ?? state._value}
 				autocomplete={props.autocomplete}
+				onInput={(event: ChangeEvent<HTMLInputElement>) =>
+					state.handleInput(event)
+				}
 				onClick={(event: ClickEvent<HTMLSelectElement>) =>
 					state.handleClick(event)
 				}
@@ -163,6 +184,9 @@ export default function DBSelect(props: DBSelectProps) {
 												<option
 													key={optgroupOption.value.toString()}
 													value={optgroupOption.value}
+													selected={
+														optgroupOption.selected
+													}
 													disabled={
 														optgroupOption.disabled
 													}>
@@ -177,7 +201,8 @@ export default function DBSelect(props: DBSelectProps) {
 								<Show when={!option.options}>
 									<option
 										value={option.value}
-										disabled={option.disabled}>
+										disabled={option.disabled}
+										selected={option.selected}>
 										{state.getOptionLabel(option)}
 									</option>
 								</Show>
@@ -203,14 +228,16 @@ export default function DBSelect(props: DBSelectProps) {
 				id={state._validMessageId}
 				size="small"
 				semantic="successful">
-				{state.getValidMessage()}
+				{props.validMessage ?? DEFAULT_VALID_MESSAGE}
 			</DBInfotext>
 
 			<DBInfotext
 				id={state._invalidMessageId}
 				size="small"
 				semantic="critical">
-				{state.getInvalidMessage()}
+				{props.invalidMessage ??
+					ref?.validationMessage ??
+					DEFAULT_INVALID_MESSAGE}
 			</DBInfotext>
 		</div>
 	);
diff --git a/packages/components/src/components/textarea/model.ts b/packages/components/src/components/textarea/model.ts
index 865bbefb608..74d9f868182 100644
--- a/packages/components/src/components/textarea/model.ts
+++ b/packages/components/src/components/textarea/model.ts
@@ -4,12 +4,11 @@ import {
 	FocusEventProps,
 	FocusEventState,
 	FormMessageProps,
-	FormMessageState,
 	FormProps,
 	FormState,
+	FormTextProps,
 	GlobalProps,
 	GlobalState,
-	FormTextProps,
 	InputEventProps,
 	InputEventState
 } from '../../shared/model';
@@ -54,5 +53,4 @@ export type DBTextareaState = DBTextareaDefaultState &
 	InputEventState<HTMLTextAreaElement> &
 	FocusEventState<HTMLTextAreaElement> &
 	FormState &
-	GlobalState &
-	FormMessageState;
+	GlobalState;
diff --git a/packages/components/src/components/textarea/textarea.lite.tsx b/packages/components/src/components/textarea/textarea.lite.tsx
index 38bff5d6487..e90aba0b1a4 100644
--- a/packages/components/src/components/textarea/textarea.lite.tsx
+++ b/packages/components/src/components/textarea/textarea.lite.tsx
@@ -33,7 +33,8 @@ export default function DBTextarea(props: DBTextareaProps) {
 		_validMessageId: this._id + DEFAULT_VALID_MESSAGE_ID_SUFFIX,
 		_invalidMessageId: this._id + DEFAULT_INVALID_MESSAGE_ID_SUFFIX,
 		// 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: `${this._messageId}`,
+		_descByIds: 'none',
+		_value: '',
 		defaultValues: {
 			label: DEFAULT_LABEL,
 			placeholder: ' ',
@@ -47,6 +48,17 @@ export default function DBTextarea(props: DBTextareaProps) {
 			if (props.input) {
 				props.input(event);
 			}
+		},
+		handleChange: (event: ChangeEvent<HTMLTextAreaElement>) => {
+			if (props.onChange) {
+				props.onChange(event);
+			}
+
+			if (props.change) {
+				props.change(event);
+			}
+
+			handleFrameworkEvent(this, event);
 
 			if (!ref?.validity.valid || props.customValidity === 'invalid') {
 				state._descByIds = state._invalidMessageId;
@@ -59,19 +71,8 @@ export default function DBTextarea(props: DBTextareaProps) {
 			} else if (props.message) {
 				state._descByIds = state._messageId;
 			} else {
-				state._descByIds = '';
-			}
-		},
-		handleChange: (event: ChangeEvent<HTMLTextAreaElement>) => {
-			if (props.onChange) {
-				props.onChange(event);
+				state._descByIds = 'none';
 			}
-
-			if (props.change) {
-				props.change(event);
-			}
-
-			handleFrameworkEvent(this, event);
 		},
 		handleBlur: (event: InteractionEvent<HTMLTextAreaElement>) => {
 			if (props.onBlur) {
@@ -90,16 +91,6 @@ export default function DBTextarea(props: DBTextareaProps) {
 			if (props.focus) {
 				props.focus(event);
 			}
-		},
-		getValidMessage: () => {
-			return props.validMessage || DEFAULT_VALID_MESSAGE;
-		},
-		getInvalidMessage: () => {
-			return (
-				props.invalidMessage ||
-				ref?.validationMessage ||
-				DEFAULT_INVALID_MESSAGE
-			);
 		}
 	});
 
@@ -116,9 +107,17 @@ export default function DBTextarea(props: DBTextareaProps) {
 			state._messageId = messageId;
 			state._validMessageId = validMessageId;
 			state._invalidMessageId = invalidMessageId;
+
+			if (props.message) {
+				state._descByIds = messageId;
+			}
 		}
 	}, [state._id]);
 
+	onUpdate(() => {
+		state._value = props.value;
+	}, [props.value]);
+
 	return (
 		<div
 			class={cls('db-textarea', props.className)}
@@ -155,7 +154,7 @@ export default function DBTextarea(props: DBTextareaProps) {
 				onFocus={(event: InteractionEvent<HTMLTextAreaElement>) =>
 					state.handleFocus(event)
 				}
-				value={props.value}
+				value={props.value ?? state._value}
 				aria-describedby={state._descByIds}
 				placeholder={
 					props.placeholder ?? state.defaultValues.placeholder
@@ -177,14 +176,16 @@ export default function DBTextarea(props: DBTextareaProps) {
 				id={state._validMessageId}
 				size="small"
 				semantic="successful">
-				{state.getValidMessage()}
+				{props.validMessage ?? DEFAULT_VALID_MESSAGE}
 			</DBInfotext>
 
 			<DBInfotext
 				id={state._invalidMessageId}
 				size="small"
 				semantic="critical">
-				{state.getInvalidMessage()}
+				{props.invalidMessage ??
+					ref?.validationMessage ??
+					DEFAULT_INVALID_MESSAGE}
 			</DBInfotext>
 		</div>
 	);
diff --git a/packages/components/src/shared/model.ts b/packages/components/src/shared/model.ts
index a36d5f33a43..4c466b57c7c 100644
--- a/packages/components/src/shared/model.ts
+++ b/packages/components/src/shared/model.ts
@@ -212,11 +212,6 @@ export type FormCheckProps = {
 	variant?: 'hidden';
 };
 
-export type FormMessageState = {
-	getValidMessage: () => string;
-	getInvalidMessage: () => string;
-};
-
 export type FormMessageProps = {
 	/**
 	 * Change the variant of the label to float or hidden
@@ -315,6 +310,7 @@ export type FormState = {
 	_validMessageId?: string;
 	_invalidMessageId?: string;
 	_descByIds?: string;
+	_value?: string;
 };
 
 export type InitializedState = {
diff --git a/showcases/angular-showcase/src/app/components/checkbox/checkbox.component.html b/showcases/angular-showcase/src/app/components/checkbox/checkbox.component.html
index dea5accbc28..e8db0875678 100644
--- a/showcases/angular-showcase/src/app/components/checkbox/checkbox.component.html
+++ b/showcases/angular-showcase/src/app/components/checkbox/checkbox.component.html
@@ -14,7 +14,6 @@
 			[label]="exampleProps.label"
 			[disabled]="exampleProps.disabled"
 			[checked]="exampleProps.checked"
-			[value]="exampleProps.value"
 			[required]="exampleProps.required"
 			[indeterminate]="exampleProps.indeterminate"
 			[variant]="exampleProps.variant"
diff --git a/showcases/react-showcase/src/components/select/index.tsx b/showcases/react-showcase/src/components/select/index.tsx
index 965c2dd1e91..d16ce81d6a9 100644
--- a/showcases/react-showcase/src/components/select/index.tsx
+++ b/showcases/react-showcase/src/components/select/index.tsx
@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import { DBSelect } from '../../../../../output/react/src';
 import DefaultComponent from '../index';
 import defaultComponentVariants from '../../../../shared/select.json';
@@ -14,20 +15,26 @@ const getSelect = ({
 	value,
 	required,
 	variant
-}: DBSelectProps) => (
-	<DBSelect
-		label={label}
-		placeholder={children}
-		options={options}
-		disabled={disabled}
-		variant={variant}
-		icon={icon}
-		value={value}
-		message={message}
-		required={required}>
-		{children}
-	</DBSelect>
-);
+}: DBSelectProps) => {
+	const [mValue, setValue] = useState<string>(value);
+	return (
+		<DBSelect
+			label={label}
+			placeholder={children}
+			options={options}
+			disabled={disabled}
+			variant={variant}
+			icon={icon}
+			value={mValue}
+			onChange={(event) => {
+				setValue(event.target.value);
+			}}
+			message={message}
+			required={required}>
+			{children}
+		</DBSelect>
+	);
+};
 
 const SelectComponent = () => {
 	return (
diff --git a/showcases/shared/select.json b/showcases/shared/select.json
index 9218ec97392..97db35611e9 100644
--- a/showcases/shared/select.json
+++ b/showcases/shared/select.json
@@ -185,7 +185,8 @@
 				"props": {
 					"options": [
 						{
-							"value": "Filled"
+							"value": "Filled",
+							"selected": true
 						},
 						{
 							"value": "Option 2"
@@ -244,7 +245,8 @@
 				"props": {
 					"options": [
 						{
-							"value": "Filled"
+							"value": "Filled",
+							"selected": true
 						},
 						{
 							"value": "Option 2"
diff --git a/showcases/vue-showcase/src/components/textarea/Textarea.vue b/showcases/vue-showcase/src/components/textarea/Textarea.vue
index f0a5a070e80..b5b43f6043c 100644
--- a/showcases/vue-showcase/src/components/textarea/Textarea.vue
+++ b/showcases/vue-showcase/src/components/textarea/Textarea.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import DefaultComponent from "../DefaultComponent.vue";
 import defaultComponentVariants from "../../../../shared/textarea.json";
-import { DBInput, DBTextarea } from "../../../../../output/vue/src";
+import { DBTextarea } from "../../../../../output/vue/src";
 </script>
 
 <template>

From ea3abae57b3316edba23812e7ba8c238a4eb6539 Mon Sep 17 00:00:00 2001
From: Nicolas Merget <nicolas.merget@deutschebahn.com>
Date: Fri, 10 May 2024 15:18:49 +0200
Subject: [PATCH 12/29] fix: removed unused dependency

---
 packages/components/src/components/switch/switch.lite.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/components/src/components/switch/switch.lite.tsx b/packages/components/src/components/switch/switch.lite.tsx
index 318a1b1e012..20e42425fb5 100644
--- a/packages/components/src/components/switch/switch.lite.tsx
+++ b/packages/components/src/components/switch/switch.lite.tsx
@@ -1,7 +1,6 @@
 import { onMount, useMetadata, useRef, useStore } from '@builder.io/mitosis';
 import { DBSwitchProps, DBSwitchState } from './model';
 import { cls, uuid } from '../../utils';
-import { DEFAULT_ID } from '../../shared/constants';
 import { ChangeEvent, InteractionEvent } from '../../shared/model';
 import { handleFrameworkEvent } from '../../utils/form-components';
 

From 3fd2d65a5abbec202dee99b6d73e2cbdbfb7f21f Mon Sep 17 00:00:00 2001
From: Nicolas Merget <nicolas.merget@deutschebahn.com>
Date: Mon, 13 May 2024 10:57:58 +0200
Subject: [PATCH 13/29] feat: add new tests for form-components for react- and
 vue-showcase

---
 .xo-config.cjs                                |  7 ++
 .../components/scripts/post-build/react.js    |  4 ++
 .../src/components/tabs/tabs.lite.tsx         | 72 ++++++++++---------
 showcases/e2e/home/showcase-home.spec.ts      | 69 +++++++++++++++++-
 .../src/components/form/checkbox.tsx          | 31 ++++++++
 .../src/components/form/form-wrapper.tsx      | 26 +++++++
 .../src/components/form/index.tsx             |  4 +-
 .../src/components/form/input.tsx             | 37 ++++++++++
 .../src/components/form/select.tsx            | 35 +++++++++
 .../src/components/form/textarea.tsx          | 29 ++++++++
 .../src/components/home/index.tsx             | 42 +++++++++++
 .../src/utils/navigation-item.tsx             |  4 +-
 .../src/components/form/Checkboxes.vue        | 23 ++++++
 .../src/components/form/FormWrapper.vue       | 17 +++++
 .../src/components/form/Inputs.vue            | 30 ++++++++
 .../src/components/form/Selects.vue           | 27 +++++++
 .../src/components/form/Textareas.vue         | 30 ++++++++
 .../vue-showcase/src/components/home/Home.vue | 40 +++++++++++
 .../src/utils/navigation-items.ts             |  4 +-
 19 files changed, 490 insertions(+), 41 deletions(-)
 create mode 100644 showcases/react-showcase/src/components/form/checkbox.tsx
 create mode 100644 showcases/react-showcase/src/components/form/form-wrapper.tsx
 create mode 100644 showcases/react-showcase/src/components/form/input.tsx
 create mode 100644 showcases/react-showcase/src/components/form/select.tsx
 create mode 100644 showcases/react-showcase/src/components/form/textarea.tsx
 create mode 100644 showcases/react-showcase/src/components/home/index.tsx
 create mode 100644 showcases/vue-showcase/src/components/form/Checkboxes.vue
 create mode 100644 showcases/vue-showcase/src/components/form/FormWrapper.vue
 create mode 100644 showcases/vue-showcase/src/components/form/Inputs.vue
 create mode 100644 showcases/vue-showcase/src/components/form/Selects.vue
 create mode 100644 showcases/vue-showcase/src/components/form/Textareas.vue
 create mode 100644 showcases/vue-showcase/src/components/home/Home.vue

diff --git a/.xo-config.cjs b/.xo-config.cjs
index c61e53647c6..325275314f8 100644
--- a/.xo-config.cjs
+++ b/.xo-config.cjs
@@ -42,6 +42,13 @@ module.exports = {
 				'@typescript-eslint/no-unsafe-return': 0, // valid for app
 				'import/no-extraneous-dependencies': 0 // foundation and component.css are inside this repo
 			}
+		},
+		{
+			files: ['./**/*.spec.ts'],
+			rules: {
+				// Playwright tests are async we shall use loops there
+				'no-await-in-loop': 0
+			}
 		}
 	],
 	rules: {
diff --git a/packages/components/scripts/post-build/react.js b/packages/components/scripts/post-build/react.js
index 7928fa7bdd8..31d9136fd7b 100644
--- a/packages/components/scripts/post-build/react.js
+++ b/packages/components/scripts/post-build/react.js
@@ -96,6 +96,10 @@ module.exports = (tmp) => {
 						`{...filterPassingProps(props,${JSON.stringify(
 							component?.config?.react?.propsPassingFilter ?? []
 						)})}`
+				},
+				{
+					from: 'props.value ?? _value',
+					to: 'props.value'
 				}
 			];
 
diff --git a/packages/components/src/components/tabs/tabs.lite.tsx b/packages/components/src/components/tabs/tabs.lite.tsx
index 41d5c5ea05e..02010f2b4ee 100644
--- a/packages/components/src/components/tabs/tabs.lite.tsx
+++ b/packages/components/src/components/tabs/tabs.lite.tsx
@@ -63,36 +63,34 @@ export default function DBTabs(props: DBTabsProps) {
 		},
 		initTabList() {
 			if (ref) {
-				const childTabLists = ref.getElementsByClassName('db-tab-list');
-				if (childTabLists?.length > 0) {
-					const firstTabList = childTabLists.item(0);
-					if (firstTabList) {
-						if (
-							!firstTabList
-								.getAttributeNames()
-								.includes('aria-orientation')
-						) {
-							firstTabList.setAttribute(
-								'aria-orientation',
-								props.orientation || 'horizontal'
-							);
-						}
+				const tabLists = ref.querySelector('.db-tab-list');
+				if (tabLists) {
+					if (
+						!tabLists
+							.getAttributeNames()
+							.includes('aria-orientation')
+					) {
+						tabLists.setAttribute(
+							'aria-orientation',
+							props.orientation || 'horizontal'
+						);
+					}
 
-						if (props.behaviour === 'arrows') {
-							const container = firstTabList.querySelector('ul');
-							state.scrollContainer = container;
+					if (props.behaviour === 'arrows') {
+						const container = tabLists.querySelector('ul');
+						state.scrollContainer = container;
+						state.evaluateScrollButtons(container);
+						container.addEventListener('scroll', () => {
 							state.evaluateScrollButtons(container);
-							container.addEventListener('scroll', () => {
-								state.evaluateScrollButtons(container);
-							});
-						}
+						});
 					}
 				}
 			}
 		},
 		initTabs(init?: boolean) {
 			if (ref) {
-				const tabItems = ref.getElementsByClassName('db-tab-item');
+				const tabLists = ref.querySelector('.db-tab-list');
+				const tabItems = tabLists.getElementsByClassName('db-tab-item');
 				if (tabItems?.length > 0) {
 					Array.from<Element>(tabItems).forEach(
 						(tabItem: Element, index: number) => {
@@ -130,19 +128,27 @@ export default function DBTabs(props: DBTabsProps) {
 					);
 				}
 
-				const tabPanels = ref.getElementsByClassName('db-tab-panel');
+				const tabPanels = [
+					...Array.from<Element>(
+						ref.querySelectorAll('& > .db-tab-panel')
+					),
+					...Array.from<Element>(
+						ref.querySelectorAll('& > dbtabpanel > .db-tab-panel')
+					),
+					...Array.from<Element>(
+						ref.querySelectorAll('& > db-tab-panel > .db-tab-panel')
+					)
+				];
 				if (tabPanels?.length > 0) {
-					Array.from<Element>(tabPanels).forEach(
-						(panel: Element, index: number) => {
-							if (panel.id === DEFAULT_ID) {
-								panel.id = `${state._name}-tab-panel-${index}`;
-								panel.setAttribute(
-									'aria-labelledby',
-									`${state._name}-tab-${index}`
-								);
-							}
+					tabPanels.forEach((panel: Element, index: number) => {
+						if (panel.id === DEFAULT_ID) {
+							panel.id = `${state._name}-tab-panel-${index}`;
+							panel.setAttribute(
+								'aria-labelledby',
+								`${state._name}-tab-${index}`
+							);
 						}
-					);
+					});
 				}
 			}
 		}
diff --git a/showcases/e2e/home/showcase-home.spec.ts b/showcases/e2e/home/showcase-home.spec.ts
index 58fe6c844f7..ef9b45a1e08 100644
--- a/showcases/e2e/home/showcase-home.spec.ts
+++ b/showcases/e2e/home/showcase-home.spec.ts
@@ -1,9 +1,74 @@
-import { test, expect } from '@playwright/test';
+import { test, expect, type Page } from '@playwright/test';
+
+const testFormComponents = async (
+	page: Page,
+	testId: string,
+	role: 'textbox' | 'combobox' | 'checkbox'
+) => {
+	await page.goto('./');
+	const tab = page.getByTestId(testId);
+	await tab.click({ force: true });
+	const definition = await page
+		.getByTestId('data-list')
+		.getByRole('definition')
+		.all();
+
+	const components = await page.getByTestId('tabs').getByRole(role).all();
+	for (const component of components) {
+		const index = components.indexOf(component);
+		switch (role) {
+			case 'textbox': {
+				await component.clear();
+				await component.fill(`${role}-${index}`);
+
+				break;
+			}
+
+			case 'combobox': {
+				await component.selectOption({ value: `${role}-${index}` });
+
+				break;
+			}
+
+			case 'checkbox': {
+				await component.click({ force: true });
+
+				break;
+			}
+			// No default
+		}
+	}
+
+	for (const def of definition) {
+		const index = definition.indexOf(def);
+		const text = await def.textContent();
+		if (role === 'checkbox') {
+			expect(text).toEqual('false');
+		} else {
+			expect(text).toEqual(`${role}-${index}`);
+		}
+	}
+};
 
 test.describe('Home', () => {
 	test('has title', async ({ page }) => {
 		await page.goto('./');
 		await expect(page).toHaveTitle('Showcase');
 	});
-	// TODO write separate form functionality tests without screenshots
+
+	test('test inputs', async ({ page }) => {
+		await testFormComponents(page, 'tab-inputs', 'textbox');
+	});
+
+	test('test textareas', async ({ page }) => {
+		await testFormComponents(page, 'tab-textareas', 'textbox');
+	});
+
+	test('test selects', async ({ page }) => {
+		await testFormComponents(page, 'tab-selects', 'combobox');
+	});
+
+	test('test checkboxes', async ({ page }) => {
+		await testFormComponents(page, 'tab-checkboxes', 'checkbox');
+	});
 });
diff --git a/showcases/react-showcase/src/components/form/checkbox.tsx b/showcases/react-showcase/src/components/form/checkbox.tsx
new file mode 100644
index 00000000000..6730a858e24
--- /dev/null
+++ b/showcases/react-showcase/src/components/form/checkbox.tsx
@@ -0,0 +1,31 @@
+import { DBCheckbox, DBInput } from '@db-ui/react-components/src';
+import { useState } from 'react';
+import FormWrapper from './form-wrapper';
+
+const FormCheckboxes = () => {
+	const [controlled, setControlled] = useState(true);
+	const [uncontrolled, setUncontrolled] = useState(true);
+
+	return (
+		<FormWrapper controlled={controlled} uncontrolled={uncontrolled}>
+			<DBCheckbox
+				name="checkbox"
+				checked={controlled}
+				onChange={(event) => {
+					setControlled(event.target.checked);
+				}}>
+				Controlled
+			</DBCheckbox>
+			<DBCheckbox
+				name="checkbox"
+				defaultChecked={uncontrolled}
+				onChange={(event) => {
+					setUncontrolled(event.target.checked);
+				}}>
+				Uncontrolled
+			</DBCheckbox>
+		</FormWrapper>
+	);
+};
+
+export default FormCheckboxes;
diff --git a/showcases/react-showcase/src/components/form/form-wrapper.tsx b/showcases/react-showcase/src/components/form/form-wrapper.tsx
new file mode 100644
index 00000000000..a2944ca8309
--- /dev/null
+++ b/showcases/react-showcase/src/components/form/form-wrapper.tsx
@@ -0,0 +1,26 @@
+import { type PropsWithChildren } from 'react';
+
+const FormWrapper = ({
+	children,
+	uncontrolled,
+	controlled
+}: PropsWithChildren<{
+	controlled: string | boolean;
+	uncontrolled: string | boolean;
+}>) => {
+	return (
+		<div className="form-container">
+			<form>
+				<fieldset>{children}</fieldset>
+			</form>
+			<dl data-testid="data-list">
+				<dt>Controlled:</dt>
+				<dd>{controlled.toString()}</dd>
+				<dt>Uncontrolled:</dt>
+				<dd>{uncontrolled.toString()}</dd>
+			</dl>
+		</div>
+	);
+};
+
+export default FormWrapper;
diff --git a/showcases/react-showcase/src/components/form/index.tsx b/showcases/react-showcase/src/components/form/index.tsx
index 54b0164a98b..68c89c85e2f 100644
--- a/showcases/react-showcase/src/components/form/index.tsx
+++ b/showcases/react-showcase/src/components/form/index.tsx
@@ -1,9 +1,9 @@
 import { useEffect, useState } from 'react';
 import {
+	DBDivider,
 	DBTabList,
 	DBTabPanel,
-	DBTabs,
-	DBDivider
+	DBTabs
 } from '@db-ui/react-components/src';
 import {
 	DBAccordion,
diff --git a/showcases/react-showcase/src/components/form/input.tsx b/showcases/react-showcase/src/components/form/input.tsx
new file mode 100644
index 00000000000..525770b6949
--- /dev/null
+++ b/showcases/react-showcase/src/components/form/input.tsx
@@ -0,0 +1,37 @@
+import { DBInput } from '@db-ui/react-components/src';
+import { useState } from 'react';
+import FormWrapper from './form-wrapper';
+
+const FormInputs = () => {
+	const [controlled, setControlled] = useState('test1');
+	const [uncontrolled, setUncontrolled] = useState('test2');
+
+	return (
+		<FormWrapper controlled={controlled} uncontrolled={uncontrolled}>
+			<DBInput
+				label="Controlled"
+				placeholder="Placeholder"
+				message="Description"
+				icon="user"
+				name="input-name"
+				value={controlled}
+				onChange={(event) => {
+					setControlled(event.target.value);
+				}}
+			/>
+			<DBInput
+				label="Uncontrolled"
+				placeholder="Placeholder"
+				message="Description"
+				icon="user"
+				name="input-name"
+				defaultValue={uncontrolled}
+				onChange={(event) => {
+					setUncontrolled(event.target.value);
+				}}
+			/>
+		</FormWrapper>
+	);
+};
+
+export default FormInputs;
diff --git a/showcases/react-showcase/src/components/form/select.tsx b/showcases/react-showcase/src/components/form/select.tsx
new file mode 100644
index 00000000000..1fb32adfbd0
--- /dev/null
+++ b/showcases/react-showcase/src/components/form/select.tsx
@@ -0,0 +1,35 @@
+import { DBSelect } from '@db-ui/react-components/src';
+import { useState } from 'react';
+import FormWrapper from './form-wrapper';
+
+const FormSelects = () => {
+	const [controlled, setControlled] = useState('combobox-2');
+	const [uncontrolled, setUncontrolled] = useState('combobox-2');
+
+	return (
+		<FormWrapper controlled={controlled} uncontrolled={uncontrolled}>
+			<DBSelect
+				value={controlled}
+				label="Controlled"
+				onChange={(event) => {
+					setControlled(event.target.value);
+				}}>
+				<option value="combobox-0">combobox-0</option>
+				<option value="combobox-1">combobox-1</option>
+				<option value="combobox-2">combobox-2</option>
+			</DBSelect>
+			<DBSelect
+				value={uncontrolled}
+				label="Uncontrolled"
+				onChange={(event) => {
+					setUncontrolled(event.target.value);
+				}}>
+				<option value="combobox-0">combobox-0</option>
+				<option value="combobox-1">combobox-1</option>
+				<option value="combobox-2">combobox-2</option>
+			</DBSelect>
+		</FormWrapper>
+	);
+};
+
+export default FormSelects;
diff --git a/showcases/react-showcase/src/components/form/textarea.tsx b/showcases/react-showcase/src/components/form/textarea.tsx
new file mode 100644
index 00000000000..229663d0adf
--- /dev/null
+++ b/showcases/react-showcase/src/components/form/textarea.tsx
@@ -0,0 +1,29 @@
+import { DBTextarea } from '@db-ui/react-components/src';
+import { useState } from 'react';
+import FormWrapper from './form-wrapper';
+
+const FormTextareas = () => {
+	const [controlled, setControlled] = useState('test1');
+	const [uncontrolled, setUncontrolled] = useState('test2');
+
+	return (
+		<FormWrapper controlled={controlled} uncontrolled={uncontrolled}>
+			<DBTextarea
+				label="Controlled"
+				value={controlled}
+				onChange={(event) => {
+					setControlled(event.target.value);
+				}}
+			/>
+			<DBTextarea
+				label="Uncontrolled"
+				defaultValue={uncontrolled}
+				onChange={(event) => {
+					setUncontrolled(event.target.value);
+				}}
+			/>
+		</FormWrapper>
+	);
+};
+
+export default FormTextareas;
diff --git a/showcases/react-showcase/src/components/home/index.tsx b/showcases/react-showcase/src/components/home/index.tsx
new file mode 100644
index 00000000000..0565a263831
--- /dev/null
+++ b/showcases/react-showcase/src/components/home/index.tsx
@@ -0,0 +1,42 @@
+import {
+	DBTabItem,
+	DBTabList,
+	DBTabPanel,
+	DBTabs
+} from '@db-ui/react-components/src';
+import FormInputs from '../form/input';
+import FormComponent from '../form';
+import FormTextareas from '../form/textarea';
+import FormSelects from '../form/select';
+import FormCheckboxes from '../form/checkbox';
+
+const Home = () => {
+	return (
+		<DBTabs data-testid="tabs">
+			<DBTabList>
+				<DBTabItem>All</DBTabItem>
+				<DBTabItem data-testid="tab-inputs">Input</DBTabItem>
+				<DBTabItem data-testid="tab-textareas">Textarea</DBTabItem>
+				<DBTabItem data-testid="tab-selects">Select</DBTabItem>
+				<DBTabItem data-testid="tab-checkboxes">Checkbox</DBTabItem>
+			</DBTabList>
+			<DBTabPanel>
+				<FormComponent />
+			</DBTabPanel>
+			<DBTabPanel>
+				<FormInputs />
+			</DBTabPanel>
+			<DBTabPanel>
+				<FormTextareas />
+			</DBTabPanel>
+			<DBTabPanel>
+				<FormSelects />
+			</DBTabPanel>
+			<DBTabPanel>
+				<FormCheckboxes />
+			</DBTabPanel>
+		</DBTabs>
+	);
+};
+
+export default Home;
diff --git a/showcases/react-showcase/src/utils/navigation-item.tsx b/showcases/react-showcase/src/utils/navigation-item.tsx
index e9d18aa870d..a6c5e6c34e3 100644
--- a/showcases/react-showcase/src/utils/navigation-item.tsx
+++ b/showcases/react-showcase/src/utils/navigation-item.tsx
@@ -17,7 +17,6 @@ import NotificationComponent from '../components/notification';
 import ButtonComponent from '../components/button';
 import CardComponent from '../components/card';
 import DividerComponent from '../components/divider';
-import FormComponent from '../components/form';
 import InfotextComponent from '../components/infotext';
 import InputComponent from '../components/input';
 import LinkComponent from '../components/link';
@@ -26,6 +25,7 @@ import TextareaComponent from '../components/textarea';
 import IconComponent from '../components/icon';
 import BrandComponent from '../components/brand';
 import HeaderComponent from '../components/header';
+import Home from '../components/home';
 
 export type NavigationItem = {
 	path: string;
@@ -170,5 +170,5 @@ export const NAVIGATION_ITEMS: NavigationItem[] = [
 			}
 		])
 	},
-	{ path: '', label: 'Home', component: <FormComponent /> }
+	{ path: '', label: 'Home', component: <Home /> }
 ];
diff --git a/showcases/vue-showcase/src/components/form/Checkboxes.vue b/showcases/vue-showcase/src/components/form/Checkboxes.vue
new file mode 100644
index 00000000000..9f2b7ec3641
--- /dev/null
+++ b/showcases/vue-showcase/src/components/form/Checkboxes.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import FormWrapper from "./FormWrapper.vue";
+import { DBCheckbox } from "../../../../../output/vue/src";
+import { ref } from "vue";
+
+const plain = ref(true);
+const vModel = ref(true);
+</script>
+
+<template>
+	<FormWrapper :plain="plain" :vmodel="vModel">
+		<DBCheckbox
+			name="checkbox-1"
+			@change="plain = $event.target.checked"
+			:checked="plain"
+		>
+			Plain
+		</DBCheckbox>
+		<DBCheckbox name="checkbox-1" v-model:checked="vModel">
+			VModel
+		</DBCheckbox>
+	</FormWrapper>
+</template>
diff --git a/showcases/vue-showcase/src/components/form/FormWrapper.vue b/showcases/vue-showcase/src/components/form/FormWrapper.vue
new file mode 100644
index 00000000000..597b3244774
--- /dev/null
+++ b/showcases/vue-showcase/src/components/form/FormWrapper.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+const props = defineProps(["plain", "vmodel"]);
+</script>
+
+<template>
+	<div class="form-container">
+		<form>
+			<fieldset><slot /></fieldset>
+		</form>
+		<dl data-testid="data-list">
+			<dt>Plain:</dt>
+			<dd>{{ plain?.toString() }}</dd>
+			<dt>VModel:</dt>
+			<dd>{{ vmodel?.toString() }}</dd>
+		</dl>
+	</div>
+</template>
diff --git a/showcases/vue-showcase/src/components/form/Inputs.vue b/showcases/vue-showcase/src/components/form/Inputs.vue
new file mode 100644
index 00000000000..a7da46caba2
--- /dev/null
+++ b/showcases/vue-showcase/src/components/form/Inputs.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import FormWrapper from "./FormWrapper.vue";
+import { DBInput } from "../../../../../output/vue/src";
+import { ref } from "vue";
+
+const plain = ref("test1");
+const vModel = ref("test2");
+</script>
+
+<template>
+	<FormWrapper :plain="plain" :vmodel="vModel">
+		<DBInput
+			label="Plain"
+			placeholder="Placeholder"
+			message="Description"
+			icon="user"
+			name="input-name"
+			:value="plain"
+			@change="plain = $event.target.value"
+		/>
+		<DBInput
+			label="VModel"
+			placeholder="Placeholder"
+			message="Description"
+			icon="user"
+			name="input-name"
+			v-model:value="vModel"
+		/>
+	</FormWrapper>
+</template>
diff --git a/showcases/vue-showcase/src/components/form/Selects.vue b/showcases/vue-showcase/src/components/form/Selects.vue
new file mode 100644
index 00000000000..28c48bdc59b
--- /dev/null
+++ b/showcases/vue-showcase/src/components/form/Selects.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import FormWrapper from "./FormWrapper.vue";
+import { DBSelect } from "../../../../../output/vue/src";
+import { ref } from "vue";
+
+const plain = ref("combobox-2");
+const vModel = ref("combobox-2");
+</script>
+
+<template>
+	<FormWrapper :plain="plain" :vmodel="vModel">
+		<DBSelect
+			:value="plain"
+			label="Plain"
+			@change="plain = $event.target.value"
+		>
+			<option value="combobox-0">combobox-0</option>
+			<option value="combobox-1">combobox-1</option>
+			<option value="combobox-2">combobox-2</option>
+		</DBSelect>
+		<DBSelect label="VModel" v-model:value="vModel">
+			<option value="combobox-0">combobox-0</option>
+			<option value="combobox-1">combobox-1</option>
+			<option value="combobox-2">combobox-2</option>
+		</DBSelect>
+	</FormWrapper>
+</template>
diff --git a/showcases/vue-showcase/src/components/form/Textareas.vue b/showcases/vue-showcase/src/components/form/Textareas.vue
new file mode 100644
index 00000000000..d0bd55ab121
--- /dev/null
+++ b/showcases/vue-showcase/src/components/form/Textareas.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import FormWrapper from "./FormWrapper.vue";
+import { DBTextarea } from "../../../../../output/vue/src";
+import { ref } from "vue";
+
+const plain = ref("test1");
+const vModel = ref("test2");
+</script>
+
+<template>
+	<FormWrapper :plain="plain" :vmodel="vModel">
+		<DBTextarea
+			label="Plain"
+			placeholder="Placeholder"
+			message="Description"
+			icon="user"
+			name="textarevalue-name"
+			:value="plain"
+			@change="plain = $event.target.value"
+		/>
+		<DBTextarea
+			label="VModel"
+			placeholder="Placeholder"
+			message="Description"
+			icon="user"
+			name="input-name"
+			v-model:value="vModel"
+		/>
+	</FormWrapper>
+</template>
diff --git a/showcases/vue-showcase/src/components/home/Home.vue b/showcases/vue-showcase/src/components/home/Home.vue
new file mode 100644
index 00000000000..bf2d0cce47d
--- /dev/null
+++ b/showcases/vue-showcase/src/components/home/Home.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import {
+	DBTabItem,
+	DBTabList,
+	DBTabPanel,
+	DBTabs
+} from "../../../../../output/vue/src";
+import Form from "../form/Form.vue";
+import Textareas from "../form/Textareas.vue";
+import Selects from "../form/Selects.vue";
+import Checkboxes from "../form/Checkboxes.vue";
+import Inputs from "../form/Inputs.vue";
+</script>
+
+<template>
+	<DBTabs data-testid="tabs">
+		<DBTabList>
+			<DBTabItem>All</DBTabItem>
+			<DBTabItem data-testid="tab-inputs">Input</DBTabItem>
+			<DBTabItem data-testid="tab-textareas">Textarea</DBTabItem>
+			<DBTabItem data-testid="tab-selects">Select</DBTabItem>
+			<DBTabItem data-testid="tab-checkboxes">Checkbox</DBTabItem>
+		</DBTabList>
+		<DBTabPanel>
+			<Form />
+		</DBTabPanel>
+		<DBTabPanel>
+			<Inputs />
+		</DBTabPanel>
+		<DBTabPanel>
+			<Textareas />
+		</DBTabPanel>
+		<DBTabPanel>
+			<Selects />
+		</DBTabPanel>
+		<DBTabPanel>
+			<Checkboxes />
+		</DBTabPanel>
+	</DBTabs>
+</template>
diff --git a/showcases/vue-showcase/src/utils/navigation-items.ts b/showcases/vue-showcase/src/utils/navigation-items.ts
index a6b44aa42bd..417bddd2290 100644
--- a/showcases/vue-showcase/src/utils/navigation-items.ts
+++ b/showcases/vue-showcase/src/utils/navigation-items.ts
@@ -11,7 +11,6 @@ import NavigationItem from '../components/navigation-item/NavigationItem.vue';
 import Navigation from '../components/navigation/Navigation.vue';
 import Select from '../components/select/Select.vue';
 import Tag from '../components/tag/Tag.vue';
-import Form from '../components/form/Form.vue';
 import Button from '../components/button/Button.vue';
 import Input from '../components/input/Input.vue';
 import Link from '../components/link/Link.vue';
@@ -27,6 +26,7 @@ import Textarea from '../components/textarea/Textarea.vue';
 import Brand from '../components/brand/Brand.vue';
 import Icon from '../components/icon/Icon.vue';
 import Header from '../components/header/Header.vue';
+import Home from '../components/home/Home.vue';
 
 export type NavItem = {
 	path: string;
@@ -151,7 +151,7 @@ export const navigationItems: NavItem[] = [
 			}
 		])
 	},
-	{ path: '/', label: 'Home', component: Form }
+	{ path: '/', label: 'Home', component: Home }
 ];
 
 const pushRoute = (routes: RouteRecordRaw[], item: NavItem) => {

From ce2d6a126735d13b6d342fe24a4a548591b063b9 Mon Sep 17 00:00:00 2001
From: Nicolas Merget <nicolas.merget@deutschebahn.com>
Date: Mon, 13 May 2024 11:43:20 +0200
Subject: [PATCH 14/29] feat: add new tests for form-components for
 angular-showcase

---
 .../src/components/select/select.lite.tsx     |  5 ++-
 .../form/checkboxes/checkboxes.component.html | 22 +++++++++++++
 .../form/checkboxes/checkboxes.component.ts   | 16 ++++++++++
 .../form/inputs/inputs.component.html         | 31 +++++++++++++++++++
 .../form/inputs/inputs.component.ts           | 16 ++++++++++
 .../form/selects/selects.component.html       | 25 +++++++++++++++
 .../form/selects/selects.component.ts         | 16 ++++++++++
 .../form/textareas/textareas.component.html   | 28 +++++++++++++++++
 .../form/textareas/textareas.component.ts     | 16 ++++++++++
 .../form/wrapper/wrapper.component.html       | 13 ++++++++
 .../form/wrapper/wrapper.component.ts         | 13 ++++++++
 .../app/components/home/home.component.html   | 24 ++++++++++++++
 .../src/app/components/home/home.component.ts | 30 ++++++++++++++++++
 .../src/app/utils/navigation-item.ts          |  4 +--
 showcases/e2e/home/showcase-home.spec.ts      |  3 ++
 15 files changed, 259 insertions(+), 3 deletions(-)
 create mode 100644 showcases/angular-showcase/src/app/components/form/checkboxes/checkboxes.component.html
 create mode 100644 showcases/angular-showcase/src/app/components/form/checkboxes/checkboxes.component.ts
 create mode 100644 showcases/angular-showcase/src/app/components/form/inputs/inputs.component.html
 create mode 100644 showcases/angular-showcase/src/app/components/form/inputs/inputs.component.ts
 create mode 100644 showcases/angular-showcase/src/app/components/form/selects/selects.component.html
 create mode 100644 showcases/angular-showcase/src/app/components/form/selects/selects.component.ts
 create mode 100644 showcases/angular-showcase/src/app/components/form/textareas/textareas.component.html
 create mode 100644 showcases/angular-showcase/src/app/components/form/textareas/textareas.component.ts
 create mode 100644 showcases/angular-showcase/src/app/components/form/wrapper/wrapper.component.html
 create mode 100644 showcases/angular-showcase/src/app/components/form/wrapper/wrapper.component.ts
 create mode 100644 showcases/angular-showcase/src/app/components/home/home.component.html
 create mode 100644 showcases/angular-showcase/src/app/components/home/home.component.ts

diff --git a/packages/components/src/components/select/select.lite.tsx b/packages/components/src/components/select/select.lite.tsx
index eab8b0f78fc..c0a0afcabf6 100644
--- a/packages/components/src/components/select/select.lite.tsx
+++ b/packages/components/src/components/select/select.lite.tsx
@@ -28,7 +28,10 @@ import {
 import { handleFrameworkEvent } from '../../utils/form-components';
 
 useMetadata({
-	isAttachedToShadowDom: true
+	isAttachedToShadowDom: true,
+	angular: {
+		nativeAttributes: ['value']
+	}
 });
 
 export default function DBSelect(props: DBSelectProps) {
diff --git a/showcases/angular-showcase/src/app/components/form/checkboxes/checkboxes.component.html b/showcases/angular-showcase/src/app/components/form/checkboxes/checkboxes.component.html
new file mode 100644
index 00000000000..1c7a026331e
--- /dev/null
+++ b/showcases/angular-showcase/src/app/components/form/checkboxes/checkboxes.component.html
@@ -0,0 +1,22 @@
+<app-form-wrapper
+	[plain]="plain"
+	[model]="ngModel"
+	[control]="formControl.value"
+>
+	<db-checkbox
+		[checked]="plain"
+		(change)="plain = $event.target.checked"
+		name="checkbox"
+		label="Plain"
+	></db-checkbox>
+	<db-checkbox
+		[(ngModel)]="ngModel"
+		name="checkbox"
+		label="ngModel"
+	></db-checkbox>
+	<db-checkbox
+		[formControl]="formControl"
+		name="checkbox"
+		label="formControl"
+	></db-checkbox>
+</app-form-wrapper>
diff --git a/showcases/angular-showcase/src/app/components/form/checkboxes/checkboxes.component.ts b/showcases/angular-showcase/src/app/components/form/checkboxes/checkboxes.component.ts
new file mode 100644
index 00000000000..6f337e4a897
--- /dev/null
+++ b/showcases/angular-showcase/src/app/components/form/checkboxes/checkboxes.component.ts
@@ -0,0 +1,16 @@
+import { Component } from '@angular/core';
+import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { WrapperComponent } from '../wrapper/wrapper.component';
+import { DBCheckbox } from '../../../../../../../output/angular/src';
+
+@Component({
+	selector: 'app-checkboxes',
+	standalone: true,
+	imports: [WrapperComponent, DBCheckbox, FormsModule, ReactiveFormsModule],
+	templateUrl: './checkboxes.component.html'
+})
+export class CheckboxesComponent {
+	plain = true;
+	ngModel = true;
+	formControl: FormControl = new FormControl(true);
+}
diff --git a/showcases/angular-showcase/src/app/components/form/inputs/inputs.component.html b/showcases/angular-showcase/src/app/components/form/inputs/inputs.component.html
new file mode 100644
index 00000000000..b292f92fe7c
--- /dev/null
+++ b/showcases/angular-showcase/src/app/components/form/inputs/inputs.component.html
@@ -0,0 +1,31 @@
+<app-form-wrapper
+	[plain]="plain"
+	[model]="ngModel"
+	[control]="formControl.value"
+>
+	<db-input
+		label="Plain"
+		placeholder="Placeholder"
+		message="Description"
+		icon="user"
+		name="input-name"
+		[value]="plain"
+		(change)="plain = $event.target.value"
+	/>
+	<db-input
+		label="ngModel"
+		placeholder="Placeholder"
+		message="Description"
+		icon="user"
+		name="input-name"
+		[(ngModel)]="ngModel"
+	/>
+	<db-input
+		label="formControl"
+		placeholder="Placeholder"
+		message="Description"
+		icon="user"
+		name="input-name"
+		[formControl]="formControl"
+	/>
+</app-form-wrapper>
diff --git a/showcases/angular-showcase/src/app/components/form/inputs/inputs.component.ts b/showcases/angular-showcase/src/app/components/form/inputs/inputs.component.ts
new file mode 100644
index 00000000000..92d62365a41
--- /dev/null
+++ b/showcases/angular-showcase/src/app/components/form/inputs/inputs.component.ts
@@ -0,0 +1,16 @@
+import { Component } from '@angular/core';
+import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { WrapperComponent } from '../wrapper/wrapper.component';
+import { DBInput } from '../../../../../../../output/angular/src';
+
+@Component({
+	selector: 'app-inputs',
+	standalone: true,
+	imports: [WrapperComponent, DBInput, FormsModule, ReactiveFormsModule],
+	templateUrl: './inputs.component.html'
+})
+export class InputsComponent {
+	plain = 'test1';
+	ngModel = 'test2';
+	formControl: FormControl = new FormControl('test3');
+}
diff --git a/showcases/angular-showcase/src/app/components/form/selects/selects.component.html b/showcases/angular-showcase/src/app/components/form/selects/selects.component.html
new file mode 100644
index 00000000000..8e6a646e0fe
--- /dev/null
+++ b/showcases/angular-showcase/src/app/components/form/selects/selects.component.html
@@ -0,0 +1,25 @@
+<app-form-wrapper
+	[plain]="plain"
+	[model]="ngModel"
+	[control]="formControl.value"
+>
+	<db-select
+		label="Plain"
+		[value]="plain"
+		(change)="plain = $event.target.value"
+	>
+		<option value="combobox-0">combobox-0</option>
+		<option value="combobox-1">combobox-1</option>
+		<option value="combobox-2">combobox-2</option>
+	</db-select>
+	<db-select label="ngModel" [(ngModel)]="ngModel">
+		<option value="combobox-0">combobox-0</option>
+		<option value="combobox-1">combobox-1</option>
+		<option value="combobox-2">combobox-2</option>
+	</db-select>
+	<db-select label="formControl" [formControl]="formControl">
+		<option value="combobox-0">combobox-0</option>
+		<option value="combobox-1">combobox-1</option>
+		<option value="combobox-2">combobox-2</option>
+	</db-select>
+</app-form-wrapper>
diff --git a/showcases/angular-showcase/src/app/components/form/selects/selects.component.ts b/showcases/angular-showcase/src/app/components/form/selects/selects.component.ts
new file mode 100644
index 00000000000..a7aae117c4d
--- /dev/null
+++ b/showcases/angular-showcase/src/app/components/form/selects/selects.component.ts
@@ -0,0 +1,16 @@
+import { Component } from '@angular/core';
+import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { WrapperComponent } from '../wrapper/wrapper.component';
+import { DBSelect } from '../../../../../../../output/angular/src';
+
+@Component({
+	selector: 'app-selects',
+	standalone: true,
+	imports: [WrapperComponent, DBSelect, FormsModule, ReactiveFormsModule],
+	templateUrl: './selects.component.html'
+})
+export class SelectsComponent {
+	plain = 'combobox-2';
+	ngModel = 'combobox-2';
+	formControl: FormControl = new FormControl('combobox-2');
+}
diff --git a/showcases/angular-showcase/src/app/components/form/textareas/textareas.component.html b/showcases/angular-showcase/src/app/components/form/textareas/textareas.component.html
new file mode 100644
index 00000000000..69bc53da9b7
--- /dev/null
+++ b/showcases/angular-showcase/src/app/components/form/textareas/textareas.component.html
@@ -0,0 +1,28 @@
+<app-form-wrapper
+	[plain]="plain"
+	[model]="ngModel"
+	[control]="formControl.value"
+>
+	<db-textarea
+		label="Plain"
+		placeholder="Placeholder"
+		message="Description"
+		name="input-name"
+		[value]="plain"
+		(change)="plain = $event.target.value"
+	/>
+	<db-textarea
+		label="ngModel"
+		placeholder="Placeholder"
+		message="Description"
+		name="input-name"
+		[(ngModel)]="ngModel"
+	/>
+	<db-textarea
+		label="formControl"
+		placeholder="Placeholder"
+		message="Description"
+		name="input-name"
+		[formControl]="formControl"
+	/>
+</app-form-wrapper>
diff --git a/showcases/angular-showcase/src/app/components/form/textareas/textareas.component.ts b/showcases/angular-showcase/src/app/components/form/textareas/textareas.component.ts
new file mode 100644
index 00000000000..1d60865a2a9
--- /dev/null
+++ b/showcases/angular-showcase/src/app/components/form/textareas/textareas.component.ts
@@ -0,0 +1,16 @@
+import { Component } from '@angular/core';
+import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { WrapperComponent } from '../wrapper/wrapper.component';
+import { DBTextarea } from '../../../../../../../output/angular/src';
+
+@Component({
+	selector: 'app-textareas',
+	standalone: true,
+	imports: [WrapperComponent, DBTextarea, FormsModule, ReactiveFormsModule],
+	templateUrl: './textareas.component.html'
+})
+export class TextareasComponent {
+	plain = 'test1';
+	ngModel = 'test2';
+	formControl: FormControl = new FormControl('test3');
+}
diff --git a/showcases/angular-showcase/src/app/components/form/wrapper/wrapper.component.html b/showcases/angular-showcase/src/app/components/form/wrapper/wrapper.component.html
new file mode 100644
index 00000000000..a25b985cbd2
--- /dev/null
+++ b/showcases/angular-showcase/src/app/components/form/wrapper/wrapper.component.html
@@ -0,0 +1,13 @@
+<div class="form-container">
+	<form>
+		<fieldset><ng-content></ng-content></fieldset>
+	</form>
+	<dl data-testid="data-list">
+		<dt>Plain:</dt>
+		<dd>{{ plain?.toString() }}</dd>
+		<dt>ngModel:</dt>
+		<dd>{{ model?.toString() }}</dd>
+		<dt>formControl:</dt>
+		<dd>{{ control?.toString() }}</dd>
+	</dl>
+</div>
diff --git a/showcases/angular-showcase/src/app/components/form/wrapper/wrapper.component.ts b/showcases/angular-showcase/src/app/components/form/wrapper/wrapper.component.ts
new file mode 100644
index 00000000000..94c86dfe72f
--- /dev/null
+++ b/showcases/angular-showcase/src/app/components/form/wrapper/wrapper.component.ts
@@ -0,0 +1,13 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+	selector: 'app-form-wrapper',
+	standalone: true,
+	imports: [],
+	templateUrl: './wrapper.component.html'
+})
+export class WrapperComponent {
+	@Input('plain') plain!: string | boolean;
+	@Input('model') model!: string | boolean;
+	@Input('control') control!: string | boolean;
+}
diff --git a/showcases/angular-showcase/src/app/components/home/home.component.html b/showcases/angular-showcase/src/app/components/home/home.component.html
new file mode 100644
index 00000000000..1740f8a2ad1
--- /dev/null
+++ b/showcases/angular-showcase/src/app/components/home/home.component.html
@@ -0,0 +1,24 @@
+<db-tabs data-testid="tabs">
+	<db-tab-list>
+		<db-tab-item>All</db-tab-item>
+		<db-tab-item data-testid="tab-inputs">Input</db-tab-item>
+		<db-tab-item data-testid="tab-textareas">Textarea</db-tab-item>
+		<db-tab-item data-testid="tab-selects">Select</db-tab-item>
+		<db-tab-item data-testid="tab-checkboxes">Checkbox</db-tab-item>
+	</db-tab-list>
+	<db-tab-panel>
+		<app-form />
+	</db-tab-panel>
+	<db-tab-panel>
+		<app-inputs />
+	</db-tab-panel>
+	<db-tab-panel>
+		<app-textareas />
+	</db-tab-panel>
+	<db-tab-panel>
+		<app-selects />
+	</db-tab-panel>
+	<db-tab-panel>
+		<app-checkboxes />
+	</db-tab-panel>
+</db-tabs>
diff --git a/showcases/angular-showcase/src/app/components/home/home.component.ts b/showcases/angular-showcase/src/app/components/home/home.component.ts
new file mode 100644
index 00000000000..37bf3a8aa29
--- /dev/null
+++ b/showcases/angular-showcase/src/app/components/home/home.component.ts
@@ -0,0 +1,30 @@
+import { Component } from '@angular/core';
+import {
+	DBTabItem,
+	DBTabList,
+	DBTabPanel,
+	DBTabs
+} from '../../../../../../output/angular/src';
+import { InputsComponent } from '../form/inputs/inputs.component';
+import { FormComponent } from '../form/form.component';
+import { TextareasComponent } from '../form/textareas/textareas.component';
+import { SelectsComponent } from '../form/selects/selects.component';
+import { CheckboxesComponent } from '../form/checkboxes/checkboxes.component';
+
+@Component({
+	selector: 'app-home',
+	templateUrl: './home.component.html',
+	imports: [
+		DBTabs,
+		DBTabItem,
+		DBTabList,
+		DBTabPanel,
+		InputsComponent,
+		FormComponent,
+		TextareasComponent,
+		SelectsComponent,
+		CheckboxesComponent
+	],
+	standalone: true
+})
+export class HomeComponent {}
diff --git a/showcases/angular-showcase/src/app/utils/navigation-item.ts b/showcases/angular-showcase/src/app/utils/navigation-item.ts
index ae211ecc30b..c3b2b4f9c84 100644
--- a/showcases/angular-showcase/src/app/utils/navigation-item.ts
+++ b/showcases/angular-showcase/src/app/utils/navigation-item.ts
@@ -14,7 +14,6 @@ import { SelectComponent } from '../components/select/select.component';
 import { TagComponent } from '../components/tag/tag.component';
 import { InputComponent } from '../components/input/input.component';
 import { ButtonComponent } from '../components/button/button.component';
-import { FormComponent } from '../components/form/form.component';
 import { LinkComponent } from '../components/link/link.component';
 import { NotificationComponent } from '../components/notification/notification.component';
 import { RadioComponent } from '../components/radio/radio.component';
@@ -27,6 +26,7 @@ import { DrawerComponent } from '../components/drawer/drawer.component';
 import { IconComponent } from '../components/icon/icon.component';
 import { BrandComponent } from '../components/brand/brand.component';
 import { HeaderComponent } from '../components/header/header.component';
+import { HomeComponent } from '../components/home/home.component';
 
 export type NavItem = {
 	path: string;
@@ -167,7 +167,7 @@ export const NAVIGATION_ITEMS: NavItem[] = [
 			}
 		])
 	},
-	{ path: '', label: 'Home', component: FormComponent }
+	{ path: '', label: 'Home', component: HomeComponent }
 ];
 
 const pushRoute = (routes: Routes, item: NavItem) => {
diff --git a/showcases/e2e/home/showcase-home.spec.ts b/showcases/e2e/home/showcase-home.spec.ts
index ef9b45a1e08..17e57514a53 100644
--- a/showcases/e2e/home/showcase-home.spec.ts
+++ b/showcases/e2e/home/showcase-home.spec.ts
@@ -39,6 +39,9 @@ const testFormComponents = async (
 		}
 	}
 
+	// Move focus out of last component to reflect changes
+	await tab.click({ force: true });
+
 	for (const def of definition) {
 		const index = definition.indexOf(def);
 		const text = await def.textContent();

From 70f4b76d70c53a4b4680437901ab4d1c69a84d30 Mon Sep 17 00:00:00 2001
From: Nicolas Merget <nicolas.merget@deutschebahn.com>
Date: Tue, 14 May 2024 15:13:59 +0200
Subject: [PATCH 15/29] fix: issue from PR

---
 .../components/src/components/checkbox/checkbox.lite.tsx   | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/packages/components/src/components/checkbox/checkbox.lite.tsx b/packages/components/src/components/checkbox/checkbox.lite.tsx
index 98faf63fb8f..f05fa9745f6 100644
--- a/packages/components/src/components/checkbox/checkbox.lite.tsx
+++ b/packages/components/src/components/checkbox/checkbox.lite.tsx
@@ -73,13 +73,6 @@ export default function DBCheckbox(props: DBCheckboxProps) {
 			if (props.focus) {
 				props.focus(event);
 			}
-		},
-		getValidMessage: () => {
-			return props.validMessage || DEFAULT_VALID_MESSAGE;
-		},
-
-		getInvalidMessage: () => {
-			return '';
 		}
 	});
 

From 072bb2b4372982a7933c1316b0847aa572c472f5 Mon Sep 17 00:00:00 2001
From: Nicolas Merget <nicolas.merget@deutschebahn.com>
Date: Wed, 15 May 2024 09:24:09 +0200
Subject: [PATCH 16/29] fix: issue with angular

---
 .../components/scripts/post-build/angular.js  |  2 +-
 .../accordion-item/accordion-item.lite.tsx    |  7 +-----
 .../components/accordion/accordion.lite.tsx   |  7 +-----
 .../app/components/form/form.component.html   | 22 +++++++++----------
 .../form/wrapper/wrapper.component.html       |  6 ++---
 5 files changed, 17 insertions(+), 27 deletions(-)

diff --git a/packages/components/scripts/post-build/angular.js b/packages/components/scripts/post-build/angular.js
index 8bc55ff1b26..79ff1005a1a 100644
--- a/packages/components/scripts/post-build/angular.js
+++ b/packages/components/scripts/post-build/angular.js
@@ -186,7 +186,7 @@ export class ${directive.name}Directive {}
 const getAttributePassing = (componentName) => `
 ngAfterViewInit(): void {
 \t\tconst element: HTMLElement | null = this.ref?.nativeElement;
-\t\tconst parent = element?.closest('db-${componentName}') ?? element?.closest('db${componentName.replaceAll('-', '')}');
+\t\tconst parent = element?.closest('db-${componentName}');
 \t\tif (element && parent) {
 \t\t\tconst attributes = parent.attributes;
 \t\t\tfor (let i = 0; i < attributes.length; i++) {
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 7e7a5194390..539f9d3cace 100644
--- a/packages/components/src/components/accordion-item/accordion-item.lite.tsx
+++ b/packages/components/src/components/accordion-item/accordion-item.lite.tsx
@@ -12,12 +12,7 @@ import { ClickEvent } from '../../shared/model';
 import { DEFAULT_ID } from '../../shared/constants';
 
 useMetadata({
-	isAttachedToShadowDom: true,
-	component: {
-		// MS Power Apps
-		includeIcon: false,
-		properties: []
-	}
+	isAttachedToShadowDom: true
 });
 
 export default function DBAccordionItem(props: DBAccordionItemProps) {
diff --git a/packages/components/src/components/accordion/accordion.lite.tsx b/packages/components/src/components/accordion/accordion.lite.tsx
index 4e388a39c7c..3fbdaf3d8e3 100644
--- a/packages/components/src/components/accordion/accordion.lite.tsx
+++ b/packages/components/src/components/accordion/accordion.lite.tsx
@@ -13,12 +13,7 @@ import { DBAccordionItem } from '../accordion-item';
 import { DBAccordionItemDefaultProps } from '../accordion-item/model';
 
 useMetadata({
-	isAttachedToShadowDom: true,
-	component: {
-		// MS Power Apps
-		includeIcon: false,
-		properties: []
-	}
+	isAttachedToShadowDom: true
 });
 
 export default function DBAccordion(props: DBAccordionProps) {
diff --git a/showcases/angular-showcase/src/app/components/form/form.component.html b/showcases/angular-showcase/src/app/components/form/form.component.html
index ee895898299..3d9737e3156 100644
--- a/showcases/angular-showcase/src/app/components/form/form.component.html
+++ b/showcases/angular-showcase/src/app/components/form/form.component.html
@@ -257,18 +257,18 @@ <h1>Output</h1>
 
 			<br />
 
-			<DBTabs orientation="vertical">
-				<DBTabList>
-					<DBTabItem icon="airplane">Airplane Button</DBTabItem>
-					<DBTabItem iconAfter="cancel">Cancel Button</DBTabItem>
-					<DBTabItem iconAfter="cancel">
+			<db-tabs orientation="vertical">
+				<db-tab-list>
+					<db-tab-item icon="airplane">Airplane Button</db-tab-item>
+					<db-tab-item iconAfter="cancel">Cancel Button</db-tab-item>
+					<db-tab-item iconAfter="cancel">
 						Long Button Label with a lot of text
-					</DBTabItem>
-					<DBTabItem icon="airplane" iconAfter="cancel">
+					</db-tab-item>
+					<db-tab-item icon="airplane" iconAfter="cancel">
 						Another Button Label with a lot of text
-					</DBTabItem>
-					<DBTabItem icon="airplane" [noText]="true"></DBTabItem>
-				</DBTabList>
+					</db-tab-item>
+					<db-tab-item icon="airplane" [noText]="true"></db-tab-item>
+				</db-tab-list>
 				<DBTabPanel>
 					It is a long established fact that a reader will be
 					distracted by the readable content of a page when looking at
@@ -320,7 +320,7 @@ <h1>Output</h1>
 					pains.
 				</DBTabPanel>
 				<DBTabPanel>Tab Panel 5</DBTabPanel>
-			</DBTabs>
+			</db-tabs>
 		</dl>
 	</div>
 </div>
diff --git a/showcases/angular-showcase/src/app/components/form/wrapper/wrapper.component.html b/showcases/angular-showcase/src/app/components/form/wrapper/wrapper.component.html
index a25b985cbd2..6984274cf65 100644
--- a/showcases/angular-showcase/src/app/components/form/wrapper/wrapper.component.html
+++ b/showcases/angular-showcase/src/app/components/form/wrapper/wrapper.component.html
@@ -4,10 +4,10 @@
 	</form>
 	<dl data-testid="data-list">
 		<dt>Plain:</dt>
-		<dd>{{ plain?.toString() }}</dd>
+		<dd>{{ plain.toString() }}</dd>
 		<dt>ngModel:</dt>
-		<dd>{{ model?.toString() }}</dd>
+		<dd>{{ model.toString() }}</dd>
 		<dt>formControl:</dt>
-		<dd>{{ control?.toString() }}</dd>
+		<dd>{{ control.toString() }}</dd>
 	</dl>
 </div>

From c823486f845d0901111af9bc9bc10ee8fefce8b0 Mon Sep 17 00:00:00 2001
From: Nicolas Merget <nicolas.merget@deutschebahn.com>
Date: Wed, 26 Jun 2024 15:54:51 +0200
Subject: [PATCH 17/29] fix: issue with vue showcase

---
 showcases/vue-showcase/src/utils/navigation-items.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/showcases/vue-showcase/src/utils/navigation-items.ts b/showcases/vue-showcase/src/utils/navigation-items.ts
index 84a48b94cd2..be5e72f7203 100644
--- a/showcases/vue-showcase/src/utils/navigation-items.ts
+++ b/showcases/vue-showcase/src/utils/navigation-items.ts
@@ -27,7 +27,7 @@ import Textarea from '../components/textarea/Textarea.vue';
 import Brand from '../components/brand/Brand.vue';
 import Icon from '../components/icon/Icon.vue';
 import Header from '../components/header/Header.vue';
-import Home from '../components/home/Home.vue';
+import Form from '../components/form/Form.vue';
 
 export type NavItem = {
 	path: string;

From 6abdad7bc9f63e6cbe20d5f95cdd469966d481bc Mon Sep 17 00:00:00 2001
From: Nicolas Merget <nicolas.merget@deutschebahn.com>
Date: Thu, 27 Jun 2024 08:30:51 +0200
Subject: [PATCH 18/29] fix: issue with vue refs

---
 packages/components/scripts/post-build/vue.ts                | 5 ++++-
 .../src/components/accordion-item/AccordionItem.vue          | 1 -
 showcases/vue-showcase/src/components/form/Form.vue          | 2 +-
 showcases/vue-showcase/src/components/select/Select.vue      | 2 +-
 showcases/vue-showcase/src/utils/navigation-items.ts         | 4 ++--
 5 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/packages/components/scripts/post-build/vue.ts b/packages/components/scripts/post-build/vue.ts
index d2c640469c0..c1dff793277 100644
--- a/packages/components/scripts/post-build/vue.ts
+++ b/packages/components/scripts/post-build/vue.ts
@@ -63,10 +63,13 @@ export default (tmp?: boolean) => {
 				{
 					from: /immediate: true,/g,
 					to: 'immediate: true,\nflush: "post"'
+				},
+				{
+					from: /this.\$refs.ref\?.validationMessage/g,
+					to: 'this?.$refs.ref?.validationMessage'
 				}
 			];
 
-
 			// This is a workaround for valid/invalidMessages resetting values
 			[
 				'HTMLSelectElement',
diff --git a/showcases/vue-showcase/src/components/accordion-item/AccordionItem.vue b/showcases/vue-showcase/src/components/accordion-item/AccordionItem.vue
index 46f449884b6..96bcb8cb186 100644
--- a/showcases/vue-showcase/src/components/accordion-item/AccordionItem.vue
+++ b/showcases/vue-showcase/src/components/accordion-item/AccordionItem.vue
@@ -2,7 +2,6 @@
 import DefaultComponent from "../DefaultComponent.vue";
 import defaultComponentVariants from "../../../../shared/accordion-item.json";
 import { DBAccordionItem } from "../../../../../output/vue/src";
-import { ref } from "vue";
 </script>
 
 <template>
diff --git a/showcases/vue-showcase/src/components/form/Form.vue b/showcases/vue-showcase/src/components/form/Form.vue
index afd62cb1499..4c55dd74095 100644
--- a/showcases/vue-showcase/src/components/form/Form.vue
+++ b/showcases/vue-showcase/src/components/form/Form.vue
@@ -17,7 +17,7 @@ const textareavModel = ref("default value");
 const textarea = ref("default value");
 const textareaDefaultValue = ref("");
 const dateInput = ref("");
-const radio = ref<HTMLInputElement>();
+const radio = ref<string>();
 const checkbox = ref<boolean[]>([true, false]);
 const tags = ref<string[]>([]);
 
diff --git a/showcases/vue-showcase/src/components/select/Select.vue b/showcases/vue-showcase/src/components/select/Select.vue
index 00d9f1bb033..ead08293d13 100644
--- a/showcases/vue-showcase/src/components/select/Select.vue
+++ b/showcases/vue-showcase/src/components/select/Select.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import DefaultComponent from "../DefaultComponent.vue";
 import defaultComponentVariants from "../../../../shared/select.json";
-import { DBInput, DBSelect } from "../../../../../output/vue/src";
+import { DBSelect } from "../../../../../output/vue/src";
 </script>
 
 <template>
diff --git a/showcases/vue-showcase/src/utils/navigation-items.ts b/showcases/vue-showcase/src/utils/navigation-items.ts
index be5e72f7203..350013b8ff0 100644
--- a/showcases/vue-showcase/src/utils/navigation-items.ts
+++ b/showcases/vue-showcase/src/utils/navigation-items.ts
@@ -27,7 +27,7 @@ import Textarea from '../components/textarea/Textarea.vue';
 import Brand from '../components/brand/Brand.vue';
 import Icon from '../components/icon/Icon.vue';
 import Header from '../components/header/Header.vue';
-import Form from '../components/form/Form.vue';
+import Home from '../components/home/Home.vue';
 
 export type NavItem = {
 	path: string;
@@ -172,7 +172,7 @@ export const navigationItems: NavItem[] = [
 			}
 		])
 	},
-	{ path: '/', label: 'Home', component: markRaw(Form) }
+	{ path: '/', label: 'Home', component: markRaw(Home) }
 ];
 
 const pushRoute = (routes: RouteRecordRaw[], item: NavItem) => {

From 50310978c3190a043cda0561753ed515552913c4 Mon Sep 17 00:00:00 2001
From: Nicolas Merget <nicolas.merget@deutschebahn.com>
Date: Fri, 5 Jul 2024 08:18:47 +0200
Subject: [PATCH 19/29] chore: add comments for overwrites

---
 packages/components/scripts/post-build/react.ts | 2 ++
 packages/components/scripts/post-build/vue.ts   | 1 +
 2 files changed, 3 insertions(+)

diff --git a/packages/components/scripts/post-build/react.ts b/packages/components/scripts/post-build/react.ts
index a59459c63b3..aa7d6bfecfb 100644
--- a/packages/components/scripts/post-build/react.ts
+++ b/packages/components/scripts/post-build/react.ts
@@ -99,6 +99,8 @@ export default (tmp?: boolean) => {
 							component?.config?.react?.propsPassingFilter ?? []
 						)})}`
 				},
+				/* We need to overwrite the internal state._value property just for react to have controlled components.
+				 * It works for Angular & Vue, so we overwrite it only for React.  */
 				{
 					from: 'props.value ?? _value',
 					to: 'props.value'
diff --git a/packages/components/scripts/post-build/vue.ts b/packages/components/scripts/post-build/vue.ts
index c1dff793277..6706269ad96 100644
--- a/packages/components/scripts/post-build/vue.ts
+++ b/packages/components/scripts/post-build/vue.ts
@@ -64,6 +64,7 @@ export default (tmp?: boolean) => {
 					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?.$refs.ref?.validationMessage'

From a7cc66f5f0da23319db07e3e7ebccbd095d8da77 Mon Sep 17 00:00:00 2001
From: Nicolas Merget <nicolas.merget@deutschebahn.com>
Date: Fri, 5 Jul 2024 14:27:15 +0200
Subject: [PATCH 20/29] fix: issues from PR

---
 .../scripts/post-build/components.ts          |  4 +++
 packages/components/scripts/post-build/vue.ts |  4 ++-
 .../src/components/checkbox/checkbox.lite.tsx |  1 +
 .../src/components/input/input.lite.tsx       |  1 +
 .../src/components/select/select.lite.tsx     |  1 +
 .../src/components/tabs/tabs.lite.tsx         | 32 +++++++------------
 .../src/components/textarea/textarea.lite.tsx |  1 +
 .../app/components/form/form.component.html   | 14 ++++----
 8 files changed, 30 insertions(+), 28 deletions(-)

diff --git a/packages/components/scripts/post-build/components.ts b/packages/components/scripts/post-build/components.ts
index af15c70d257..3cff22ed719 100644
--- a/packages/components/scripts/post-build/components.ts
+++ b/packages/components/scripts/post-build/components.ts
@@ -63,6 +63,10 @@ export const getComponents = (): Component[] => [
 				{
 					from: 'scrollContainer = null;',
 					to: 'scrollContainer: Element | null = null;'
+				},
+				{
+					from: '& > .db-tab-panel',
+					to: '& > dbtabpanel > .db-tab-panel, & > db-tab-panel > .db-tab-panel'
 				}
 			]
 		}
diff --git a/packages/components/scripts/post-build/vue.ts b/packages/components/scripts/post-build/vue.ts
index 6706269ad96..3e3194a7708 100644
--- a/packages/components/scripts/post-build/vue.ts
+++ b/packages/components/scripts/post-build/vue.ts
@@ -71,7 +71,9 @@ export default (tmp?: boolean) => {
 				}
 			];
 
-			// This is a workaround for valid/invalidMessages resetting values
+			/* 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',
diff --git a/packages/components/src/components/checkbox/checkbox.lite.tsx b/packages/components/src/components/checkbox/checkbox.lite.tsx
index f05fa9745f6..2990ddb59db 100644
--- a/packages/components/src/components/checkbox/checkbox.lite.tsx
+++ b/packages/components/src/components/checkbox/checkbox.lite.tsx
@@ -43,6 +43,7 @@ export default function DBCheckbox(props: DBCheckboxProps) {
 			}
 			handleFrameworkEvent(this, event, 'checked');
 
+			/* For a11y reasons we need to map the correct message with the checkbox */
 			if (!ref?.validity.valid || props.customValidity === 'invalid') {
 				state._descByIds = state._invalidMessageId;
 			} else if (
diff --git a/packages/components/src/components/input/input.lite.tsx b/packages/components/src/components/input/input.lite.tsx
index f5fa68745f9..4b80b61ca81 100644
--- a/packages/components/src/components/input/input.lite.tsx
+++ b/packages/components/src/components/input/input.lite.tsx
@@ -66,6 +66,7 @@ export default function DBInput(props: DBInputProps) {
 
 			handleFrameworkEvent(this, event);
 
+			/* For a11y reasons we need to map the correct message with the input */
 			if (!ref?.validity.valid || props.customValidity === 'invalid') {
 				state._descByIds = state._invalidMessageId;
 			} else if (
diff --git a/packages/components/src/components/select/select.lite.tsx b/packages/components/src/components/select/select.lite.tsx
index c0a0afcabf6..d86de808a9b 100644
--- a/packages/components/src/components/select/select.lite.tsx
+++ b/packages/components/src/components/select/select.lite.tsx
@@ -72,6 +72,7 @@ export default function DBSelect(props: DBSelectProps) {
 
 			handleFrameworkEvent(this, event);
 
+			/* For a11y reasons we need to map the correct message with the select */
 			if (!ref?.validity.valid || props.customValidity === 'invalid') {
 				state._descByIds = state._invalidMessageId;
 			} else if (
diff --git a/packages/components/src/components/tabs/tabs.lite.tsx b/packages/components/src/components/tabs/tabs.lite.tsx
index fe3852418fb..f1786b1b6c6 100644
--- a/packages/components/src/components/tabs/tabs.lite.tsx
+++ b/packages/components/src/components/tabs/tabs.lite.tsx
@@ -122,27 +122,19 @@ export default function DBTabs(props: DBTabsProps) {
 					);
 				}
 
-				const tabPanels = [
-					...Array.from<Element>(
-						ref.querySelectorAll('& > .db-tab-panel')
-					),
-					...Array.from<Element>(
-						ref.querySelectorAll('& > dbtabpanel > .db-tab-panel')
-					),
-					...Array.from<Element>(
-						ref.querySelectorAll('& > db-tab-panel > .db-tab-panel')
-					)
-				];
+				const tabPanels = Array.from<Element>(
+					ref.querySelectorAll('& > .db-tab-panel')
+				);
 				if (tabPanels?.length > 0) {
-					tabPanels.forEach((panel: Element, index: number) => {
-						if (!panel.id) {
-							panel.id = `${state._name}-tab-panel-${index}`;
-							panel.setAttribute(
-								'aria-labelledby',
-								`${state._name}-tab-${index}`
-							);
-						}
-					});
+					for (const panel of tabPanels) {
+						if (panel.id) continue;
+						const index: number = tabPanels.indexOf(panel);
+						panel.id = `${state._name}-tab-panel-${index}`;
+						panel.setAttribute(
+							'aria-labelledby',
+							`${state._name}-tab-${index}`
+						);
+					}
 				}
 			}
 		}
diff --git a/packages/components/src/components/textarea/textarea.lite.tsx b/packages/components/src/components/textarea/textarea.lite.tsx
index e90aba0b1a4..179a8b00c27 100644
--- a/packages/components/src/components/textarea/textarea.lite.tsx
+++ b/packages/components/src/components/textarea/textarea.lite.tsx
@@ -60,6 +60,7 @@ export default function DBTextarea(props: DBTextareaProps) {
 
 			handleFrameworkEvent(this, event);
 
+			/* For a11y reasons we need to map the correct message with the textarea */
 			if (!ref?.validity.valid || props.customValidity === 'invalid') {
 				state._descByIds = state._invalidMessageId;
 			} else if (
diff --git a/showcases/angular-showcase/src/app/components/form/form.component.html b/showcases/angular-showcase/src/app/components/form/form.component.html
index 3d9737e3156..bad11e317d0 100644
--- a/showcases/angular-showcase/src/app/components/form/form.component.html
+++ b/showcases/angular-showcase/src/app/components/form/form.component.html
@@ -269,7 +269,7 @@ <h1>Output</h1>
 					</db-tab-item>
 					<db-tab-item icon="airplane" [noText]="true"></db-tab-item>
 				</db-tab-list>
-				<DBTabPanel>
+				<db-tab-panel>
 					It is a long established fact that a reader will be
 					distracted by the readable content of a page when looking at
 					its layout. The point of using Lorem Ipsum is that it has a
@@ -281,10 +281,10 @@ <h1>Output</h1>
 					sites still in their infancy. Various versions have evolved
 					over the years, sometimes by accident, sometimes on purpose
 					(injected humour and the like).
-				</DBTabPanel>
-				<DBTabPanel>Tab Panel 2</DBTabPanel>
-				<DBTabPanel>Tab Panel 3</DBTabPanel>
-				<DBTabPanel>
+				</db-tab-panel>
+				<db-tab-panel>Tab Panel 2</db-tab-panel>
+				<db-tab-panel>Tab Panel 3</db-tab-panel>
+				<db-tab-panel>
 					At vero eos et accusamus et iusto odio dignissimos ducimus
 					qui blanditiis praesentium voluptatum deleniti atque
 					corrupti quos dolores et quas molestias excepturi sint
@@ -318,8 +318,8 @@ <h1>Output</h1>
 					principle of selection: he rejects pleasures to secure other
 					greater pleasures, or else he endures pains to avoid worse
 					pains.
-				</DBTabPanel>
-				<DBTabPanel>Tab Panel 5</DBTabPanel>
+				</db-tab-panel>
+				<db-tab-panel>Tab Panel 5</db-tab-panel>
 			</db-tabs>
 		</dl>
 	</div>

From a3ba11c7146c429337ab819d9c1b7d28beedf134 Mon Sep 17 00:00:00 2001
From: Nicolas Merget <104347736+nmerget@users.noreply.github.com>
Date: Tue, 9 Jul 2024 12:25:12 +0200
Subject: [PATCH 21/29] Update packages/components/src/shared/constants.ts

Co-authored-by: Maximilian Franzke <787658+mfranzke@users.noreply.github.com>
---
 packages/components/src/shared/constants.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/shared/constants.ts b/packages/components/src/shared/constants.ts
index 7307b53366a..a1a519eb710 100644
--- a/packages/components/src/shared/constants.ts
+++ b/packages/components/src/shared/constants.ts
@@ -5,7 +5,7 @@ export const DEFAULT_MESSAGE_ID_SUFFIX: string = '-message';
 export const DEFAULT_VALID_MESSAGE_ID_SUFFIX: string = '-valid-message';
 export const DEFAULT_INVALID_MESSAGE_ID_SUFFIX: string = '-invalid-message';
 export const DEFAULT_PLACEHOLDER_ID_SUFFIX: string = '-placeholder';
-export const DEFAULT_DATALIST_ID_SUFFIX: string = '-placeholder';
+export const DEFAULT_DATALIST_ID_SUFFIX: string = '-datalist';
 
 export const DEFAULT_VALID_MESSAGE: string = 'TODO: Add a validMessage';
 export const DEFAULT_INVALID_MESSAGE: string = 'TODO: Add an invalidMessage';

From e1ef8a0679c0ee34e07b2abad83319fd1764297a Mon Sep 17 00:00:00 2001
From: Nicolas Merget <104347736+nmerget@users.noreply.github.com>
Date: Tue, 9 Jul 2024 12:25:32 +0200
Subject: [PATCH 22/29] Update
 showcases/angular-showcase/src/app/components/form/checkboxes/checkboxes.component.html

Co-authored-by: Maximilian Franzke <787658+mfranzke@users.noreply.github.com>
---
 .../form/checkboxes/checkboxes.component.html | 35 ++++++++++---------
 1 file changed, 19 insertions(+), 16 deletions(-)

diff --git a/showcases/angular-showcase/src/app/components/form/checkboxes/checkboxes.component.html b/showcases/angular-showcase/src/app/components/form/checkboxes/checkboxes.component.html
index 1c7a026331e..39c40c91846 100644
--- a/showcases/angular-showcase/src/app/components/form/checkboxes/checkboxes.component.html
+++ b/showcases/angular-showcase/src/app/components/form/checkboxes/checkboxes.component.html
@@ -3,20 +3,23 @@
 	[model]="ngModel"
 	[control]="formControl.value"
 >
-	<db-checkbox
-		[checked]="plain"
-		(change)="plain = $event.target.checked"
-		name="checkbox"
-		label="Plain"
-	></db-checkbox>
-	<db-checkbox
-		[(ngModel)]="ngModel"
-		name="checkbox"
-		label="ngModel"
-	></db-checkbox>
-	<db-checkbox
-		[formControl]="formControl"
-		name="checkbox"
-		label="formControl"
-	></db-checkbox>
+	<fieldset>
+		<legend>Different form approaches</legend>
+		<db-checkbox
+		  [checked]="plain"
+		  (change)="plain = $event.target.checked"
+		  name="checkbox"
+		  label="Plain"
+		></db-checkbox>
+		<db-checkbox
+		  [(ngModel)]="ngModel"
+		  name="checkbox"
+		  label="ngModel"
+		></db-checkbox>
+		<db-checkbox
+		  [formControl]="formControl"
+		  name="checkbox"
+		  label="formControl"
+		></db-checkbox>
+	</fieldset>
 </app-form-wrapper>

From 21dc640c15f1194b609ea47fe89c16bc0a8ecc9b Mon Sep 17 00:00:00 2001
From: Nicolas Merget <104347736+nmerget@users.noreply.github.com>
Date: Tue, 9 Jul 2024 12:25:52 +0200
Subject: [PATCH 23/29] Update
 showcases/angular-showcase/src/app/components/form/selects/selects.component.html

Co-authored-by: Maximilian Franzke <787658+mfranzke@users.noreply.github.com>
---
 .../form/selects/selects.component.html       | 41 ++++++++++---------
 1 file changed, 22 insertions(+), 19 deletions(-)

diff --git a/showcases/angular-showcase/src/app/components/form/selects/selects.component.html b/showcases/angular-showcase/src/app/components/form/selects/selects.component.html
index 8e6a646e0fe..7b4861bcd79 100644
--- a/showcases/angular-showcase/src/app/components/form/selects/selects.component.html
+++ b/showcases/angular-showcase/src/app/components/form/selects/selects.component.html
@@ -3,23 +3,26 @@
 	[model]="ngModel"
 	[control]="formControl.value"
 >
-	<db-select
-		label="Plain"
-		[value]="plain"
-		(change)="plain = $event.target.value"
-	>
-		<option value="combobox-0">combobox-0</option>
-		<option value="combobox-1">combobox-1</option>
-		<option value="combobox-2">combobox-2</option>
-	</db-select>
-	<db-select label="ngModel" [(ngModel)]="ngModel">
-		<option value="combobox-0">combobox-0</option>
-		<option value="combobox-1">combobox-1</option>
-		<option value="combobox-2">combobox-2</option>
-	</db-select>
-	<db-select label="formControl" [formControl]="formControl">
-		<option value="combobox-0">combobox-0</option>
-		<option value="combobox-1">combobox-1</option>
-		<option value="combobox-2">combobox-2</option>
-	</db-select>
+	<fieldset>
+		<legend>Different form approaches</legend>
+		<db-select
+			label="Plain"
+			[value]="plain"
+			(change)="plain = $event.target.value"
+		>
+			<option value="combobox-0">combobox-0</option>
+			<option value="combobox-1">combobox-1</option>
+			<option value="combobox-2">combobox-2</option>
+		</db-select>
+		<db-select label="ngModel" [(ngModel)]="ngModel">
+			<option value="combobox-0">combobox-0</option>
+			<option value="combobox-1">combobox-1</option>
+			<option value="combobox-2">combobox-2</option>
+		</db-select>
+		<db-select label="formControl" [formControl]="formControl">
+			<option value="combobox-0">combobox-0</option>
+			<option value="combobox-1">combobox-1</option>
+			<option value="combobox-2">combobox-2</option>
+		</db-select>
+	</fieldset>
 </app-form-wrapper>

From 280a4687a0f89a138c84f7550ffa45c623a887b3 Mon Sep 17 00:00:00 2001
From: Nicolas Merget <104347736+nmerget@users.noreply.github.com>
Date: Tue, 9 Jul 2024 12:26:18 +0200
Subject: [PATCH 24/29] Update
 showcases/angular-showcase/src/app/components/form/inputs/inputs.component.html

Co-authored-by: Maximilian Franzke <787658+mfranzke@users.noreply.github.com>
---
 .../form/inputs/inputs.component.html         | 53 ++++++++++---------
 1 file changed, 28 insertions(+), 25 deletions(-)

diff --git a/showcases/angular-showcase/src/app/components/form/inputs/inputs.component.html b/showcases/angular-showcase/src/app/components/form/inputs/inputs.component.html
index b292f92fe7c..47f3f1922dc 100644
--- a/showcases/angular-showcase/src/app/components/form/inputs/inputs.component.html
+++ b/showcases/angular-showcase/src/app/components/form/inputs/inputs.component.html
@@ -3,29 +3,32 @@
 	[model]="ngModel"
 	[control]="formControl.value"
 >
-	<db-input
-		label="Plain"
-		placeholder="Placeholder"
-		message="Description"
-		icon="user"
-		name="input-name"
-		[value]="plain"
-		(change)="plain = $event.target.value"
-	/>
-	<db-input
-		label="ngModel"
-		placeholder="Placeholder"
-		message="Description"
-		icon="user"
-		name="input-name"
-		[(ngModel)]="ngModel"
-	/>
-	<db-input
-		label="formControl"
-		placeholder="Placeholder"
-		message="Description"
-		icon="user"
-		name="input-name"
-		[formControl]="formControl"
-	/>
+	<fieldset>
+		<legend>Different form approaches</legend>
+		<db-input
+			label="Plain"
+			placeholder="Placeholder"
+			message="Description"
+			icon="user"
+			name="input-name"
+			[value]="plain"
+			(change)="plain = $event.target.value"
+		/>
+		<db-input
+			label="ngModel"
+			placeholder="Placeholder"
+			message="Description"
+			icon="user"
+			name="input-name"
+			[(ngModel)]="ngModel"
+		/>
+		<db-input
+			label="formControl"
+			placeholder="Placeholder"
+			message="Description"
+			icon="user"
+			name="input-name"
+			[formControl]="formControl"
+		/>
+	</fieldset>
 </app-form-wrapper>

From 051f70e18e42957e4ef2b1dae3b9c51bd24b1fe0 Mon Sep 17 00:00:00 2001
From: Nicolas Merget <104347736+nmerget@users.noreply.github.com>
Date: Tue, 9 Jul 2024 12:26:24 +0200
Subject: [PATCH 25/29] Update
 showcases/angular-showcase/src/app/components/form/textareas/textareas.component.html

Co-authored-by: Maximilian Franzke <787658+mfranzke@users.noreply.github.com>
---
 .../form/textareas/textareas.component.html   | 47 ++++++++++---------
 1 file changed, 25 insertions(+), 22 deletions(-)

diff --git a/showcases/angular-showcase/src/app/components/form/textareas/textareas.component.html b/showcases/angular-showcase/src/app/components/form/textareas/textareas.component.html
index 69bc53da9b7..b769ff19196 100644
--- a/showcases/angular-showcase/src/app/components/form/textareas/textareas.component.html
+++ b/showcases/angular-showcase/src/app/components/form/textareas/textareas.component.html
@@ -3,26 +3,29 @@
 	[model]="ngModel"
 	[control]="formControl.value"
 >
-	<db-textarea
-		label="Plain"
-		placeholder="Placeholder"
-		message="Description"
-		name="input-name"
-		[value]="plain"
-		(change)="plain = $event.target.value"
-	/>
-	<db-textarea
-		label="ngModel"
-		placeholder="Placeholder"
-		message="Description"
-		name="input-name"
-		[(ngModel)]="ngModel"
-	/>
-	<db-textarea
-		label="formControl"
-		placeholder="Placeholder"
-		message="Description"
-		name="input-name"
-		[formControl]="formControl"
-	/>
+	<fieldset>
+		<legend>Different form approaches</legend>
+		<db-textarea
+			label="Plain"
+			placeholder="Placeholder"
+			message="Description"
+			name="input-name"
+			[value]="plain"
+			(change)="plain = $event.target.value"
+		/>
+		<db-textarea
+			label="ngModel"
+			placeholder="Placeholder"
+			message="Description"
+			name="input-name"
+			[(ngModel)]="ngModel"
+		/>
+		<db-textarea
+			label="formControl"
+			placeholder="Placeholder"
+			message="Description"
+			name="input-name"
+			[formControl]="formControl"
+		/>
+	</fieldset>
 </app-form-wrapper>

From a72b6e22d10e6995db5132cb35e0666ba726557b Mon Sep 17 00:00:00 2001
From: Nicolas Merget <104347736+nmerget@users.noreply.github.com>
Date: Wed, 10 Jul 2024 13:25:41 +0200
Subject: [PATCH 26/29] Update
 showcases/angular-showcase/src/app/components/form/textareas/textareas.component.html

Co-authored-by: Maximilian Franzke <787658+mfranzke@users.noreply.github.com>
---
 .../src/app/components/form/textareas/textareas.component.html  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/showcases/angular-showcase/src/app/components/form/textareas/textareas.component.html b/showcases/angular-showcase/src/app/components/form/textareas/textareas.component.html
index b769ff19196..356d3ef08d0 100644
--- a/showcases/angular-showcase/src/app/components/form/textareas/textareas.component.html
+++ b/showcases/angular-showcase/src/app/components/form/textareas/textareas.component.html
@@ -9,7 +9,7 @@
 			label="Plain"
 			placeholder="Placeholder"
 			message="Description"
-			name="input-name"
+			name="textarea-name"
 			[value]="plain"
 			(change)="plain = $event.target.value"
 		/>

From 36682119b094a8e0d03017398a177b8aa4911ba3 Mon Sep 17 00:00:00 2001
From: Nicolas Merget <104347736+nmerget@users.noreply.github.com>
Date: Wed, 10 Jul 2024 13:25:48 +0200
Subject: [PATCH 27/29] Update
 showcases/angular-showcase/src/app/components/form/textareas/textareas.component.html

Co-authored-by: Maximilian Franzke <787658+mfranzke@users.noreply.github.com>
---
 .../src/app/components/form/textareas/textareas.component.html  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/showcases/angular-showcase/src/app/components/form/textareas/textareas.component.html b/showcases/angular-showcase/src/app/components/form/textareas/textareas.component.html
index 356d3ef08d0..5c7c267354e 100644
--- a/showcases/angular-showcase/src/app/components/form/textareas/textareas.component.html
+++ b/showcases/angular-showcase/src/app/components/form/textareas/textareas.component.html
@@ -17,7 +17,7 @@
 			label="ngModel"
 			placeholder="Placeholder"
 			message="Description"
-			name="input-name"
+			name="textarea-name"
 			[(ngModel)]="ngModel"
 		/>
 		<db-textarea

From 6d18f0f50fa9d1ec732a20fbd78364f271f5792f Mon Sep 17 00:00:00 2001
From: Nicolas Merget <104347736+nmerget@users.noreply.github.com>
Date: Wed, 10 Jul 2024 13:25:58 +0200
Subject: [PATCH 28/29] Update
 showcases/angular-showcase/src/app/components/form/textareas/textareas.component.html

Co-authored-by: Maximilian Franzke <787658+mfranzke@users.noreply.github.com>
---
 .../src/app/components/form/textareas/textareas.component.html  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/showcases/angular-showcase/src/app/components/form/textareas/textareas.component.html b/showcases/angular-showcase/src/app/components/form/textareas/textareas.component.html
index 5c7c267354e..e71354d59dd 100644
--- a/showcases/angular-showcase/src/app/components/form/textareas/textareas.component.html
+++ b/showcases/angular-showcase/src/app/components/form/textareas/textareas.component.html
@@ -24,7 +24,7 @@
 			label="formControl"
 			placeholder="Placeholder"
 			message="Description"
-			name="input-name"
+			name="textarea-name"
 			[formControl]="formControl"
 		/>
 	</fieldset>

From d6b3354cf83f21716e8d1fb842401478df382d97 Mon Sep 17 00:00:00 2001
From: Nicolas Merget <104347736+nmerget@users.noreply.github.com>
Date: Wed, 10 Jul 2024 13:26:11 +0200
Subject: [PATCH 29/29] Update
 showcases/vue-showcase/src/components/form/Textareas.vue

Co-authored-by: Maximilian Franzke <787658+mfranzke@users.noreply.github.com>
---
 showcases/vue-showcase/src/components/form/Textareas.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/showcases/vue-showcase/src/components/form/Textareas.vue b/showcases/vue-showcase/src/components/form/Textareas.vue
index d0bd55ab121..16fab214db8 100644
--- a/showcases/vue-showcase/src/components/form/Textareas.vue
+++ b/showcases/vue-showcase/src/components/form/Textareas.vue
@@ -23,7 +23,7 @@ const vModel = ref("test2");
 			placeholder="Placeholder"
 			message="Description"
 			icon="user"
-			name="input-name"
+			name="textarea-name"
 			v-model:value="vModel"
 		/>
 	</FormWrapper>