Loading state for input

[jonyhayama]

First of all, just wanted to say that is an awesome framework!

I noticed we have a loading state to everything but form elements:

[aria-busy="true"]:not(input):not(select):not(textarea)

I'm not exactly sure why that is and I was wondering how hard would it be to provide this state to form elements.

As a starting point, I'd vote for the input (text and search) element. My specific scenario for that implementation would be an "autocomplete" search field...

Anyway, here's some sample code (just a draft) with the general idea:

:root {
  --icon-loading-dark: url("SOME SVG");
  --icon-loading: url("SOME SVG");
}
@media only screen and (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) {
    --icon-loading: var(--icon-loading-dark);
  }
}
[data-theme="dark"] {
  --icon-loading: var(--icon-loading-dark);
}

input[aria-busy="true"] {
  padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem)!important;
  background-image: var(--icon-loading);
  background-position: center right 0.5rem;
  background-size: 1.25rem auto;
  background-repeat: no-repeat;
}

I'll gladly work on a PR if this idea moves forward.