From 5021252c9b07f55c80ee26b1022c304e57a56a6a Mon Sep 17 00:00:00 2001
From: Maximilian Franzke <Maximilian.Franzke@deutschebahn.com>
Date: Thu, 11 Apr 2024 06:26:52 +0200
Subject: [PATCH 1/4] refactor: added counter

---
 source/_patterns/01-elements/_form-elements.scss  | 14 ++++++++++++++
 source/_patterns/01-elements/input/input.hbs      |  5 ++++-
 source/_patterns/01-elements/input/input.scss     | 13 +++++++++++++
 .../01-elements/input/input~maxlength.json        |  7 +++++++
 .../01-elements/input/input~maxlength.md          |  6 ++++++
 .../_patterns/01-elements/textarea/textarea.hbs   |  2 +-
 .../_patterns/01-elements/textarea/textarea.scss  | 15 ++-------------
 7 files changed, 47 insertions(+), 15 deletions(-)
 create mode 100644 source/_patterns/01-elements/input/input~maxlength.json
 create mode 100644 source/_patterns/01-elements/input/input~maxlength.md

diff --git a/source/_patterns/01-elements/_form-elements.scss b/source/_patterns/01-elements/_form-elements.scss
index edd678234b..8e6319f17f 100644
--- a/source/_patterns/01-elements/_form-elements.scss
+++ b/source/_patterns/01-elements/_form-elements.scss
@@ -110,3 +110,17 @@
 		--formElement---borderColor: #{$db-color-red-500};
 	}
 }
+
+// counter styling
+%form-element-counter {
+	margin-top: to-rem($pxValue: 12);
+
+	// Description styles
+	// TODO: This probably still needs to get further changed to a general "hint" pattern or similar
+	&,
+	& + .description {
+		color: $db-color-cool-gray-500;
+		font-size: to-rem($pxValue: 14);
+		padding: to-rem($pxValue: 6) to-rem($pxValue: 10);
+	}
+}
diff --git a/source/_patterns/01-elements/input/input.hbs b/source/_patterns/01-elements/input/input.hbs
index 3862c3efe0..cf5ae05b66 100644
--- a/source/_patterns/01-elements/input/input.hbs
+++ b/source/_patterns/01-elements/input/input.hbs
@@ -11,7 +11,9 @@
 	{{{ validation }}}
 	{{#if datalist }} list="datalist{{ id }}"{{/if }}
 	aria-labelledby="{{ id }}-label"
-	{{#if variant}} data-variant="{{variant}}"{{/if }}>
+	{{#if variant}} data-variant="{{variant}}"{{/if }}
+	{{#if maxlength }} maxlength="{{ maxlength }}"
+	oninput="result_{{ id }}.value=this.value.length+'/'+this.attributes.maxlength.value"{{/if }}>
 <label class="elm-label"
 	for="{{ id }}"
 	aria-hidden="true"
@@ -23,3 +25,4 @@
 		<option{{#if value }} value="{{ value }}"{{/if }}>{{ text }}</option>
 	{{/each }}
 </datalist>{{/if }}
+{{#if maxlength }}<output for="{{ id }}" id="result_{{ id }}"></output>{{/if }}
diff --git a/source/_patterns/01-elements/input/input.scss b/source/_patterns/01-elements/input/input.scss
index aee1d30e9b..b5bc42d37c 100644
--- a/source/_patterns/01-elements/input/input.scss
+++ b/source/_patterns/01-elements/input/input.scss
@@ -145,6 +145,19 @@
 		@extend %form-element-validation;
 		@extend %form-element-validation-programmatic;
 		/* stylelint-enable order/order */
+
+		&:is(
+				[type="email"],
+				[type="password"],
+				[type="search"],
+				[type="tel"],
+				[type="text"],
+				[type="url"]
+			)
+			+ label
+			+ output {
+			@extend %form-element-counter;
+		}
 	}
 
 	&[type="search"] {
diff --git a/source/_patterns/01-elements/input/input~maxlength.json b/source/_patterns/01-elements/input/input~maxlength.json
new file mode 100644
index 0000000000..0029f40a21
--- /dev/null
+++ b/source/_patterns/01-elements/input/input~maxlength.json
@@ -0,0 +1,7 @@
+{
+	"type": "text",
+	"placeholder": "Projekt Name",
+	"id": "input16",
+	"label": "Textlabel",
+	"maxlength": "100"
+}
diff --git a/source/_patterns/01-elements/input/input~maxlength.md b/source/_patterns/01-elements/input/input~maxlength.md
new file mode 100644
index 0000000000..530a927601
--- /dev/null
+++ b/source/_patterns/01-elements/input/input~maxlength.md
@@ -0,0 +1,6 @@
+---
+title: Input - maxlength
+order: 12
+---
+
+To set the maximum length of allowed characters on an input element, you could use the `maxlength`-attribute on the input field. This would additionally provide a visual counter.
diff --git a/source/_patterns/01-elements/textarea/textarea.hbs b/source/_patterns/01-elements/textarea/textarea.hbs
index 063011e47f..cdd2abcc3e 100644
--- a/source/_patterns/01-elements/textarea/textarea.hbs
+++ b/source/_patterns/01-elements/textarea/textarea.hbs
@@ -6,8 +6,8 @@
 	{{#if disabled}} disabled{{/if }}
 	{{#if describedbyid }} aria-describedby="{{ describedbyid }}"{{/if }}
 	{{{ validation }}}
-	{{#if maxlength }} maxlength="{{ maxlength }}"
 	{{#if invalid }} aria-invalid="{{ invalid }}"{{/if }}
+	{{#if maxlength }} maxlength="{{ maxlength }}"
 	oninput="result_{{ id }}.value=this.value.length+'/'+this.attributes.maxlength.value"{{/if }}
 	{{#if variant}} data-variant="{{variant}}"{{/if }}>{{ value }}</textarea>
 {{#if maxlength }}<output for="{{ id }}" id="result_{{ id }}"></output>{{/if }}
diff --git a/source/_patterns/01-elements/textarea/textarea.scss b/source/_patterns/01-elements/textarea/textarea.scss
index 79a4519220..fc132b3887 100644
--- a/source/_patterns/01-elements/textarea/textarea.scss
+++ b/source/_patterns/01-elements/textarea/textarea.scss
@@ -61,21 +61,10 @@
 		}
 	}
 
-	// TODO: Evaluate whether those could get moved to ../_form-elements.scss
 	& + output {
-		// amount of signs output
-		float: right;
-
-		margin-top: to-rem($pxValue: 12);
+		@extend %form-element-counter;
 
-		// Description styles
-		// TODO: This probably still needs to get further changed to a general "hint" pattern or similar
-		&,
-		& + .description {
-			color: $db-color-cool-gray-500;
-			font-size: to-rem($pxValue: 14);
-			padding: to-rem($pxValue: 6) to-rem($pxValue: 10);
-		}
+		float: right;
 	}
 
 	// ### Style variations

From b8aaa7f059c758da2b285f3915aeac68228fac1b Mon Sep 17 00:00:00 2001
From: Maximilian Franzke <Maximilian.Franzke@deutschebahn.com>
Date: Thu, 11 Apr 2024 06:33:39 +0200
Subject: [PATCH 2/4] docs: added relevant comments

---
 source/_patterns/01-elements/_form-elements.scss      | 2 ++
 source/_patterns/01-elements/input/input~maxlength.md | 2 ++
 2 files changed, 4 insertions(+)

diff --git a/source/_patterns/01-elements/_form-elements.scss b/source/_patterns/01-elements/_form-elements.scss
index 8e6319f17f..420fb9ae15 100644
--- a/source/_patterns/01-elements/_form-elements.scss
+++ b/source/_patterns/01-elements/_form-elements.scss
@@ -115,6 +115,8 @@
 %form-element-counter {
 	margin-top: to-rem($pxValue: 12);
 
+	// TODO: add CSS anchor positioning
+
 	// Description styles
 	// TODO: This probably still needs to get further changed to a general "hint" pattern or similar
 	&,
diff --git a/source/_patterns/01-elements/input/input~maxlength.md b/source/_patterns/01-elements/input/input~maxlength.md
index 530a927601..f6f46229d9 100644
--- a/source/_patterns/01-elements/input/input~maxlength.md
+++ b/source/_patterns/01-elements/input/input~maxlength.md
@@ -4,3 +4,5 @@ order: 12
 ---
 
 To set the maximum length of allowed characters on an input element, you could use the `maxlength`-attribute on the input field. This would additionally provide a visual counter.
+
+Please keep in mind that you'll probably have to position the output element yourself previous to in the context of e.g. a wrapping HTML element; we'll have a future solution by CSS Anchor Positioning as well.

From da42ef30097ce4044628bccd0a1718fd7c5abc0e Mon Sep 17 00:00:00 2001
From: Maximilian Franzke <Maximilian.Franzke@deutschebahn.com>
Date: Thu, 11 Apr 2024 06:34:20 +0200
Subject: [PATCH 3/4] fix: now it makes sense

---
 source/_patterns/01-elements/input/input~maxlength.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/source/_patterns/01-elements/input/input~maxlength.md b/source/_patterns/01-elements/input/input~maxlength.md
index f6f46229d9..6c23eda409 100644
--- a/source/_patterns/01-elements/input/input~maxlength.md
+++ b/source/_patterns/01-elements/input/input~maxlength.md
@@ -5,4 +5,4 @@ order: 12
 
 To set the maximum length of allowed characters on an input element, you could use the `maxlength`-attribute on the input field. This would additionally provide a visual counter.
 
-Please keep in mind that you'll probably have to position the output element yourself previous to in the context of e.g. a wrapping HTML element; we'll have a future solution by CSS Anchor Positioning as well.
+Please keep in mind that you'll probably have to position the output element yourself in relation to the context of e.g. a wrapping HTML element; we'll have a future solution by CSS Anchor Positioning as well.

From 8632db421db5e1a86f7ede73591235c7a8e2cbcf Mon Sep 17 00:00:00 2001
From: Maximilian Franzke <Maximilian.Franzke@deutschebahn.com>
Date: Thu, 11 Apr 2024 06:36:54 +0200
Subject: [PATCH 4/4] docs: we need to hide this for the moment

especially as it's not positioned correctly
---
 source/_patterns/01-elements/input/input~maxlength.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/source/_patterns/01-elements/input/input~maxlength.md b/source/_patterns/01-elements/input/input~maxlength.md
index 6c23eda409..faa853c1cd 100644
--- a/source/_patterns/01-elements/input/input~maxlength.md
+++ b/source/_patterns/01-elements/input/input~maxlength.md
@@ -1,6 +1,7 @@
 ---
 title: Input - maxlength
 order: 12
+hidden: true
 ---
 
 To set the maximum length of allowed characters on an input element, you could use the `maxlength`-attribute on the input field. This would additionally provide a visual counter.