[Bug]: sp-number-field, valid/invalid icon overlaps with the increment/decrement buttons on the rightside of the field

[arjenve]

Code of conduct

• I agree to follow this project's code of conduct.

Impacted component(s)

sp-number-field

Expected behavior

The invalid or valid icon should be located inside the field box, on the right side of field, and to the left of the increment/decrement buttons. (See also documentation for the react version of the number field)

Actual behavior

The icon overlaps with the increment / decrement button.

Screenshots

What browsers are you seeing the problem in?

Chrome

How can we reproduce this issue?

1. Go to '...'
2. Click on '....'
3. Scroll to '....'
4. Check console
5. See error

Sample code or abstract reproduction which illustrates the problem

<script src="https://jspm.dev/@spectrum-web-components/bundle/elements.js" type="module"></script>

Number10

Severity

SEV 2

Logs taken while reproducing problem

No response

[najikahalsema]

@arjenve Does the checkmark prevent users from interacting with the increment/decrement buttons?

[najikahalsema]

SWC-669