fix(input): some counter related styles (#813)

* fix(input): some counter related styles

* refactor: better positioning

Author: mfranzke

source/_patterns/01-elements/_form-elements.scss

@@ -113,9 +113,15 @@
 
 // counter styling
 %form-element-counter {
-	margin-top: to-rem($pxValue: 12);
+	&:has(+ .description) {
+		float: right;
+	}
 
-	// TODO: add CSS anchor positioning
+	&:not(:has(+ .description)) {
+		position: absolute;
+		// stylelint-disable-next-line property-no-unknown
+		inset-area: block-end span-inline-start;
+	}
 
 	// Description styles
 	// TODO: This probably still needs to get further changed to a general "hint" pattern or similar

source/_patterns/01-elements/input/input.hbs

@@ -19,10 +19,10 @@
 	aria-hidden="true"
 	id="{{ id }}-label"
 	{{#if labelHidden }} data-label-hidden="true"{{/if }}>{{ label }}</label>
+{{#if maxlength }}<output for="{{ id }}" id="result_{{ id }}" anchor="{{ id }}"></output>{{/if }}
 {{#if description }}<p{{#if describedbyid }} id="{{ describedbyid }}"{{/if }} class="description">{{{ description }}}</p>{{/if }}
 {{#if datalist }}<datalist id="datalist{{ id }}">
 	{{#each datalistItems }}
 		<option{{#if value }} value="{{ value }}"{{/if }}>{{ text }}</option>
 	{{/each }}
 </datalist>{{/if }}
-{{#if maxlength }}<output for="{{ id }}" id="result_{{ id }}"></output>{{/if }}

source/_patterns/01-elements/input/input.scss

@@ -106,7 +106,8 @@
 			margin-bottom: -#{to-rem($pxValue: 18)};
 			transform: translate($db-spacing-m, -#{to-rem($pxValue: 41)});
 
-			& + .description {
+			& + output,
+			& ~ .description {
 				margin-top: 0;
 			}
 		}

source/_patterns/01-elements/textarea/textarea.hbs

@@ -10,5 +10,5 @@
 	{{#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 }}
+{{#if maxlength }}<output for="{{ id }}" id="result_{{ id }}" anchor="{{ id }}"></output>{{/if }}
 {{#if description }}<p{{#if describedbyid }} id="{{ describedbyid }}"{{/if }} class="description">{{{ description }}}</p>{{/if }}