fix(textfield,numberfield): inline sizing

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,