fix(textfield,numberfield): inline sizing

Notes: the main thing this commit does is allow the field label's
inline-size to be set to auto, so that its width is independent of the
input.

Unfortunately this also affects help text, whose previous behavior was
to align its width to the input.

If the goal is to pass VRTs, we'll need to adjust the help text to align
its width to the input.

This behavior (label width independent of input, helptext width aligned
with input) feels odd.

Author: rise-erpelding

1st-gen/packages/number-field/src/number-field.css

@@ -39,18 +39,14 @@
     /* TODO: added stepper-button-width multiplied by 2 just to give extra space to the input field.
     That "2" is a magic number and should be removed when we are able (possibly after S2 migration). */
     --spectrum-stepper-width: calc(var(--mod-stepper-height, var(--spectrum-stepper-height)) * var(--mod-stepper-min-width-multiplier, var(--spectrum-text-field-minimum-width-multiplier)) + var(--mod-stepper-button-width, var(--spectrum-stepper-button-width)) * 2 + var(--mod-stepper-border-width, var(--spectrum-stepper-border-width)) * 2);
-
-    /* resets the inline-size of sp-number-field to the newly defined stepper-width */
-    inline-size: var(--mod-stepper-width, var(--spectrum-stepper-width));
 }
 
 :host([hide-stepper]) {
     --spectrum-stepper-width: calc(var(--mod-stepper-height, var(--spectrum-stepper-height)) * var(--mod-stepper-min-width-multiplier, var(--spectrum-text-field-minimum-width-multiplier)) + var(--mod-stepper-button-width, var(--spectrum-stepper-button-width)) + var(--mod-stepper-border-width, var(--spectrum-stepper-border-width)) * 2);
 }
 
-/* keeps the textfield 100% of the width of the sp-number-field so there isn't a gap between the containers */
 #textfield {
-    inline-size: 100%;
+    inline-size: var(--mod-stepper-width, var(--spectrum-stepper-width));
 }
 
 .input {

1st-gen/packages/number-field/src/spectrum-number-field.css

@@ -152,6 +152,7 @@
     --mod-infield-button-border-color: var(--highcontrast-stepper-border-color-keyboard-focus, var(--mod-stepper-buttons-border-color-keyboard-focus, var(--spectrum-stepper-buttons-border-color-keyboard-focus)));
     --mod-textfield-focus-indicator-width: 0;
     --mod-textfield-border-color: var(--highcontrast-stepper-border-color-keyboard-focus, var(--mod-stepper-border-color-keyboard-focus, var(--spectrum-stepper-border-color-keyboard-focus)));
+
     outline: var(--spectrum-stepper-focus-indicator-width) solid;
     outline-color: var(--spectrum-stepper-focus-indicator-color);
     outline-offset: var(--spectrum-stepper-focus-indicator-gap);
@@ -248,8 +249,6 @@
 }
 
 #textfield {
-    --spectrum-stepper-width: var(--mod-stepper-width, calc(var(--spectrum-stepper-height) * var(--mod-stepper-min-width-multiplier, var(--spectrum-text-field-minimum-width-multiplier)) + var(--spectrum-stepper-button-width) + var(--mod-stepper-border-width, var(--spectrum-stepper-border-width)) * 2));
-    inline-size: var(--spectrum-stepper-width);
     block-size: var(--spectrum-stepper-height);
     border-radius: var(--spectrum-stepper-border-radius);
     flex-flow: row;

1st-gen/packages/textfield/src/textfield.css

@@ -16,7 +16,7 @@
 :host {
     display: inline-flex;
     flex-direction: column;
-    inline-size: var(--mod-textfield-width, var(--spectrum-textfield-width));
+    inline-size: auto;
 }
 
 :host([multiline]) {
@@ -32,7 +32,7 @@
 }
 
 #textfield {
-    inline-size: 100%;
+    inline-size: var(--mod-textfield-width, var(--spectrum-textfield-width));
 }
 
 #textfield,