refactor: better positioning

Author: mfranzke

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

@@ -113,7 +113,15 @@
 
 // counter styling
 %form-element-counter {
-	// TODO: add CSS anchor positioning
+	&:has(+ .description) {
+		float: right;
+	}
+
+	&: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,7 +19,7 @@
 	aria-hidden="true"
 	id="{{ id }}-label"
 	{{#if labelHidden }} data-label-hidden="true"{{/if }}>{{ label }}</label>
-{{#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 }}
 {{#if datalist }}<datalist id="datalist{{ id }}">
 	{{#each datalistItems }}

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

@@ -158,8 +158,6 @@
 			+ label
 			+ output {
 			@extend %form-element-counter;
-
-			float: right;
 		}
 	}
 

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 }}