fix: issue with input floating label and search type (#1863)

Author: nmerget

__snapshots__/input/showcase/chromium/regular/neutral/DBInput-should-match-screenshot.png

@@ -10,8 +10,7 @@
 
 // 1px for border
 $icon-padding: calc(
-	#{form-components.$font-size-height} + 2 * #{variables.$db-spacing-fixed-sm} -
-		1px
+	#{form-components.$font-size-height} + #{variables.$db-spacing-fixed-sm} + #{variables.$db-spacing-fixed-xs}
 );
 
 .db-input {

__snapshots__/input/showcase/mobile-chrome/regular/neutral/DBInput-should-match-screenshot.png

@@ -50,7 +50,10 @@ $floating-label-size: calc(
 			inset-block-start: calc(
 				(#{variables.$db-sizing-md} - #{$font-size-height}) / 2
 			);
-			inset-inline: #{variables.$db-spacing-fixed-sm};
+			inset-inline: var(
+				--db-form-component-padding-inline-start,
+				#{variables.$db-spacing-fixed-sm}
+			);
 		}
 
 		// icons

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

@@ -372,5 +372,105 @@
 				}
 			}
 		]
+	},
+	{
+		"name": "Example - Types - Floating Label",
+		"examples": [
+			{
+				"name": "(Default) Text",
+				"props": {
+					"label": "Label",
+					"labelVariant": "floating"
+				}
+			},
+			{
+				"name": "Password",
+				"props": {
+					"label": "Label",
+					"type": "password",
+					"labelVariant": "floating"
+				}
+			},
+			{
+				"name": "Search",
+				"props": {
+					"label": "Label",
+					"type": "search",
+					"labelVariant": "floating"
+				}
+			},
+			{
+				"name": "E-Mail",
+				"props": {
+					"label": "Label",
+					"type": "email",
+					"labelVariant": "floating"
+				}
+			},
+			{
+				"name": "Number",
+				"props": {
+					"label": "Label",
+					"type": "number",
+					"labelVariant": "floating"
+				}
+			},
+			{
+				"name": "Tel",
+				"props": {
+					"label": "Label",
+					"type": "tel",
+					"labelVariant": "floating"
+				}
+			},
+			{
+				"name": "URL",
+				"props": {
+					"label": "Label",
+					"type": "url",
+					"labelVariant": "floating"
+				}
+			},
+			{
+				"name": "Date",
+				"props": {
+					"label": "Label",
+					"type": "date",
+					"labelVariant": "floating"
+				}
+			},
+			{
+				"name": "Datetime Local",
+				"props": {
+					"label": "Label",
+					"type": "datetime-local",
+					"labelVariant": "floating"
+				}
+			},
+			{
+				"name": "Month",
+				"props": {
+					"label": "Label",
+					"type": "month",
+					"labelVariant": "floating"
+				}
+			},
+			{
+				"name": "Time",
+				"props": {
+					"label": "Label",
+					"type": "time",
+					"labelVariant": "floating"
+				}
+			},
+			{
+				"name": "Week",
+				"props": {
+					"label": "Label",
+					"type": "week",
+					"labelVariant": "floating"
+				}
+			}
+		]
 	}
 ]