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 1/9] 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 2/9] 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 3/9] 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 4/9] 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 5/9] 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 6/9] 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 7/9] 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 8/9] 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 9/9] 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>