fix(numberfield): adjust calc for input to stepper spacing

- correctly calculates the input padding to account for the spacing
between the input and alert icon, alert icon size and the new spacing
between the icon and the stepper buttons
- updates metadata

Author: marissahuysentruyt

components/stepper/dist/metadata.json

@@ -8,6 +8,7 @@
     ".spectrum-NumberField-input",
     ".spectrum-NumberField-inputs",
     ".spectrum-NumberField-inputs .spectrum-Textfield .spectrum-Textfield-input",
+    ".spectrum-NumberField-inputs .spectrum-Textfield.is-invalid .spectrum-NumberField-input",
     ".spectrum-NumberField-textfield",
     ".spectrum-NumberField-textfield.spectrum-Textfield.is-invalid .spectrum-Textfield-validationIcon",
     ".spectrum-NumberField.is-disabled",
@@ -104,7 +105,6 @@
     "--mod-numberfield-spacing-block-end-edge-to-text",
     "--mod-numberfield-spacing-block-start-edge-to-text",
     "--mod-numberfield-spacing-field-to-helptext",
-    "--mod-numberfield-spacing-min-inline-end-value-to-icon",
     "--mod-numberfield-text-color",
     "--mod-numberfield-text-color-disabled",
     "--mod-numberfield-text-color-focus",
@@ -264,8 +264,6 @@
     "--mod-textfield-font-weight",
     "--mod-textfield-height",
     "--mod-textfield-icon-spacing-block-invalid",
-    "--mod-textfield-icon-spacing-inline-end-invalid",
-    "--mod-textfield-icon-spacing-inline-start-invalid",
     "--mod-textfield-min-width",
     "--mod-textfield-spacing-block-end",
     "--mod-textfield-spacing-block-start",

components/stepper/index.css

@@ -223,8 +223,6 @@
 	/* this mod overrides the inline-size of the nested textfield */
 	--mod-textfield-width: 100%;
 	--mod-textfield-height: calc(var(--mod-numberfield-block-size, var(--spectrum-numberfield-block-size)) - var(--mod-numberfield-border-width, var(--spectrum-numberfield-border-width)) * 2);
-	--mod-textfield-icon-spacing-inline-start-invalid: var(--mod-numberfield-spacing-min-inline-end-value-to-icon, var(--spectrum-numberfield-spacing-min-inline-end-value-to-icon));
-	--mod-textfield-icon-spacing-inline-end-invalid: var(--spectrum-numberfield-spacing-validation-icon-to-stepper);
 	--mod-textfield-background-color: var(--mod-numberfield-background-color, var(--spectrum-numberfield-background-color, transparent));
 	--mod-textfield-text-color-default: var(--mod-numberfield-text-color, var(--spectrum-numberfield-text-color));
 	--mod-textfield-text-color-disabled: var(--mod-numberfield-text-color-disabled, var(--spectrum-numberfield-text-color-disabled));
@@ -351,6 +349,10 @@
 		outline: none;
 		border-radius: 0;
 	}
+
+	& .spectrum-Textfield.is-invalid .spectrum-NumberField-input {
+		padding-inline-end: calc(var(--spectrum-numberfield-spacing-min-inline-end-value-to-icon) + var(--spectrum-numberfield-alert-icon-size) + var(--spectrum-numberfield-spacing-validation-icon-to-stepper));
+	}
 }
 
 /* Nested textfield subcomponent */