feat: add min-inline-size to input, select and textarea (#4011)

* feat: baseline adjustment - sets a base min-inline-size for elements without icons
* feat: icon support - increases the min-inline-size for elements that include icons or specific input types that imply icon usage
* feat: enhanced icon handling - applies an even larger size when both leading and trailing icons are present

---------

Co-authored-by: Maximilian Franzke <[email protected]>
Co-authored-by: Nicolas Merget <[email protected]>

Author: 3 people

__snapshots__/input/showcase/firefox/DBInput-should-match-screenshot-1/DBInput-should-match-screenshot.png

@@ -15,6 +15,24 @@ $icon-padding: calc(
 .db-input {
 	@include form-components.set-default-form-component(input);
 
+	// increased inline size for elements with icons or specific input types that have icons
+	&:is([data-icon], [data-icon-after]):not([data-hide-icon="true"]),
+	&:has(
+			input[type="search"],
+			input[type="date"],
+			input[type="month"],
+			input[type="week"],
+			input[type="datetime-local"],
+			input[type="time"]
+		) {
+		--db-form-component-min-inline-size: #{variables.$db-sizing-xl};
+	}
+
+	// even larger size when both - leading and trailing icons - are present
+	&[data-icon][data-icon-after] {
+		--db-form-component-min-inline-size: #{variables.$db-sizing-2xl};
+	}
+
 	// padding-inline-end according to current amount of icons
 	&[data-icon],
 	&:has(input[type="search"]) {

__snapshots__/input/showcase/mobile-safari/DBInput-should-match-screenshot-1/DBInput-should-match-screenshot.png

@@ -23,16 +23,18 @@ $has-before-padding: calc(
 	--db-form-component-padding-inline-end: calc(
 		#{form-components.$font-size-height} + #{variables.$db-spacing-fixed-sm}
 	);
+	--db-form-component-min-inline-size: ${variables.$db-sizing-xl};
+
 	// shared from form-components
 	@extend %select-icon;
 
-	min-inline-size: calc(
-		4 * #{variables.$db-sizing-md} + var(--db-form-has-before) *
-			#{variables.$db-sizing-md}
-	);
-
 	@include form-components.set-default-form-component(select);
 
+	// increased inline size for elements with icons
+	&[data-icon]:not([data-hide-icon="true"]) {
+		--db-form-component-min-inline-size: #{variables.$db-sizing-2xl};
+	}
+
 	select {
 		text-indent: $has-before-padding;
 	}

__snapshots__/input/showcase/webkit/DBInput-should-match-screenshot-1/DBInput-should-match-screenshot.png

@@ -29,6 +29,11 @@ $input-types:
 
 $check-border-size: min(#{variables.$db-border-width-2xs}, 2px);
 
+$db-min-inline-size: var(
+	--db-form-component-min-inline-size,
+	#{variables.$db-sizing-lg}
+);
+
 %dropdown-icon {
 	@include icons.set-icon("chevron_down", "after");
 
@@ -282,6 +287,9 @@ $input-valid-types:
 	display: flex;
 	flex-direction: column;
 
+	// base inline size for inputs without icons
+	min-inline-size: $db-min-inline-size;
+
 	@include set-floating-label-overwrites($selector);
 	@include set-required-label($selector);
 
@@ -305,6 +313,7 @@ $input-valid-types:
 		appearance: none;
 		max-inline-size: 100%;
 		inline-size: 100%;
+		min-inline-size: $db-min-inline-size;
 
 		/* stylelint-disable-next-line db-ux/use-spacings */
 		padding-inline: var(